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本 书 语言 和 版 式 活 涛 ， 内 容 讲解 深入 浅 出 ， 是 难得 的 JavaScript 入 门 书 。 本 书 内 容 涵 盖 JavaScript 的 基本 知识 以 
及 对 象 、 国 数 和 训 览 器 文档 对 象 模 型 等 高 阶 主题 。 书 中 配备 了 大 量 有 趣 的 示例 、 图 示 和 练习 ， 让 读者 轻 轻 松 松 掌 
握 JavaScript 编 程 。 


本 书 的 谈 者 对 象 为 JavaScript 入 门 读者 以 及 网 页 设计 入 门 者 。 
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致 JavaScript: 你 出 身 并 不 高 贵 ， 却 轻松 击败 了 所 有 在 浏览 器 领 
域 向 你 发 起 挑战 的 语言 。 


O’Reilly Media, Inc. 介绍 


O’Reilly Media 通过 图 书 、 杂 志 、 在 线 服务 、 调 查 研 究 和 会 议 等 方式 传播 创新 知识 。 自 1978 年 开始 ，O’Reilly 一 
直 都 是 前 沿 发 展 的 见证 者 和 推动 者 。 超 级 极 客 们 正在 开创 着 未 来 ， 而 我 们 关注 真正 重要 的 技术 趋势 一 一 通过 放大 
那些 “细微 的 信号 ”来 刺激 社会 对 新 科技 的 应 用 。 作 为 技术 社区 中 活跃 的 参与 者 ，O’Reilly 的 发 展 充满 了 对 创新 
的 倡导 、 创 造 和 发 扬 光 大 。 








OReilly 为 软件 开发 人 员 带 来 单 命 性 的 “动物 书 ”; 创建 第 一 个 商业 网 站 (GNN) ; 组织 了 影响 办 远 的 开放 源 
代码 峰会 ， 以 至 于 开源 软件 运动 以 此 命名 ; 创立 了 Make 杂志 ， 从 而 成 为 DIY 革命 的 主要 人 先锋， 公司 一 如 既往 
地 通过 多 种 形式 缮 结 信息 与 人 的 纽 市 。O"Reilly 的 会 议和 峰会 集聚 了 众多 超级 极 客 和 高 瞻 十 瞩 的 商业 领袖 ， 共 同 
描绘 出 开创 新 产业 的 章 命 性 思想 。 作 为 技术 人 士 获 取信 息 的 选择 ，O’Reilly 现在 还 将 先锋 专家 的 知识 传递 给 普通 
的 计算 机 用 户 。 无 论 是 通过 书籍 出 版 ， 在 线 服务 或 者 面授 课程 ， 每 一 项 O’Reilly 的 产品 都 反映 了 公司 不 可 动摇 
的 理念 一 一 信息 古 油 发 创新 的 力量 。 











业界 评论 
“O’"Reilly Radar 博客 有 口 展 碑 。 
Wired 
“OReilly 凭借 一 系列 (真希 望 当 初 我 也 想到 了 ) 非凡 想法 建立 了 数 百 万 美元 的 业务 。” 


———Business 2.0 


“O’Reilly Conference 是 聚集 关键 思想 领袖 的 绝对 典范 。” 
——CRN 


一 本 O'Reilly 的 书 就 代表 一 个 有 用 、 有 前 途 、 需 要 学 习 的 主题 


Trish Times 





“Tim 是 位 特 立 独行 的 商人 , 他 不 光 放 了 服 于 最 长 远 、 最 广阔 的 视野 并 且 切 实地 按照 Yogi Berra 的 建议 去 做 了 : “如 
果 你 在 路 上 遇 到 岔路 口 ， ER 
即 逝 的 机 会 ， 尽 管 大 路 也 不 错 。 


Linux Journal 














| 的 JavaScript 知 识 比 看 一 般 的 技术 书 要 多 。” 
Jesse Palmer，Gannett Digital 资 深 软件 开发 人 员 


| 





“如 果 每 个 中 小 学 生 都 有 机 会 阅读 Elisabeth 和 Eric 编 著 的 《Head First HTML 与 CSS》， 且 本 
书 和 Head First HTML5 Programming 也 得 以 纳入 高 中 数学 和 科学 课程 ， 那 么 我 们 国家 就 水 
远 不 会 形 失 竞争 优势 了 。 


一 一 Michael Murphy，The History Tree 资深 系统 咨询 师 





“Head First 系 列 从 书 充 分 利用 了 建构 主义 等 现代 学 习 理 论 ， 帮 助 读者 快速 掌握 新 知识 。 本 
书 表明 ， 即 便 是 专家 级 内 容 ， 也 可 高 效 而 快速 地 传授 给 读者 。 别 误会 ， 这 可 是 一 部 严肃 的 
JavaScript 著 作 ， 但 让 人 读 起 来 趣味 痊 然 ! ” 


Frank Moore，Web 设 计 师 和 开发 人 员 








“ 想 找 一 部 读 起 来 令 人 兴趣 盘 然 、 笑 声 不 断 ， 又 能 学 到 编程 技能 的 阁 作 吗 ? 本 书 就 是 这 样 的 
车 作 ! 





Tim Williams ， 软 件 领域 创业 者 


“不 省 你 的 编程 水 平 如 何 ， 都 请 将 本 书 纳 入 你 的 书 单 中 ! ” 
一 一 Chris Fuselier， 工 程 咨 询 师 





“Robson 和 Freeman 再 次 获得 了 成 功 ! 本 书 秉 水 了 他 们 编著 的 其 他 Head First 系 列 从 书 内 容 丰 
富 而 有 趣 的 写作 风格 ， 引 导读 者 完成 一 些 有 趣 而 实用 的 项 目 ， 为 使 用 现代 JavaScript 编 程 技 
巧 解决 实际 占 题 打 下 了 坚实 的 基础 。” 


一 一 Russell Alleen-Willems，DiachronicDesign.com 数 字 考 古 学 家 





“Freeman 和 Robson 一 如 既往 地 采用 创新 性 的 教学 手法 ， 回 读者 传授 基本 原理 和 复杂 概念 。” 
一 一 Mark Arana， 华 特 迪士尼 公司 战略 与 创新 部 





对 Eric T. Freeman 和 Elisabeth Robson 的 其 他 著作 的 赞誉 


“这 本 书 很 对 心 无 旁 玖 、 维 警 不 虹 的 编码 大 师 的 口味 。 很 不 错 的 实用 开发 策略 指南 ， 疫 有 又 长 又 具 
的 陈 词 滥 调 ， 能 迅速 让 我 的 大 脑 话 跃 起 来 。 
Travis Kalanick， 优 步 CEO 








“本 书 语言 清晰 幽默 ， 内 容 充 实 ， 即 便 读者 不 古 程 序 员 ， 也 能 从 中 学 到 解决 问题 的 思路 。” 
Cory Doctorow，Boing Boine 联 合 编辑 和 科幻 小 说 作家 





学 海 无 兰 ， 举 重 右 轻 ， 何 知 计 和 牛 充 栋 。 
一 一 Ward Cunningham，Wiki 之 父 


“在 我 阅读 过 的 著作 中 ， 让 我 觉得 不 可 错过 的 如 凤毛麟角 (最 多 不 超过 10 本 ) ， 本 书 位 列 其 中 。” 
一 一 David Gelernter， 耶 鲁 大 学 计算 机 教授 


它 深 次 地 打动 了 我 ， 让 我 又 天 又 突 。 


一 一 Daniel Steinberg，java.net 主 编 


“我 想 不 出 还 有 哪 位 导游 比 Eric 和 Elisabeth 更 优秀 了 。” 


一 一 Miko Matsumura，Hazelcast 市 场 营销 和 开发 人 员 关 系 副 总 裁 
(Sun 公 司 前 首席 Java 布 道 师 ) 


“本 书 让 我 爱不释手 ， 妨 不 住 当 着 妻子 的 面 洒 吻 它 。” 


———Satish Kumar 








“运用 大 量 图 表 ， 人 循序 潜 进 ， 准 确 模 拟 了 学 习 JavaScript 的 最 佳 方式 。” 
—Danny Goodman, Dynamic HTML: The Definitive Guide 作 者 








“Eric 和 Elisabeth 对 其 要 介绍 的 内 容 了如指掌 。 随 着 Internet 越 来 越 复 林 ， 在 制作 网 页 的 过 程 中 ， 灵 
感 显得 日 益 重 要 。 每 一 章 都 精心 设计 ， 既 措辞 巧妙 又 不 失实 用 地 讲解 了 每 个 概念 。” 


Ken Goldstein, Shop.comAICEO 和 This zs Rage: A Novel of Silicon Valley 
and Other Madness 作 者 








Eric T. Freeman 和 Elisabeth Robson 的 其 他 O'Reilly 图 书 
Head First Design Patterns 
Head First HTML and CSS 
Head First HTMLS Programming 


O Reilly 的 其 他 相关 图 书 
Head First HTMLS Programming 
JavasScript: The Definitive Guide 


JavaScript Enlightenment 


O'Reilly Head First 系 列 的 其 他 图 书 
Head First HTML and CSsS 
Head First HTMLS Programming 
Head First Design Patterns 
Head First Servlets and JSP 
Head First SQL 
Head First Software Development 
Head First C# 
Head First Java 
Head First Object-Oriented Analysis and Design (OOA&D) 
Head First Ajax 
Head First Rails 
Head First PHP & MySQL 
Head First Web Design 
Head First Networking 
Head First iPhone and iPad Development 


Head First jQuery 


Eric Freeman 





Eric Freeman 做 过 时 散 的 黑客 、 公 司 副 总 裁 、 工 程 师 、 


管 替 等 ， 说 熟 多 个 领域 的 语言 、 人 惯例 和 文化 ，Head First 


系列 丛书 创立 者 之 一 Kathy Sierra 视 其 为 难得 的 多 面 手 。 
在 职业 生涯 方面 ，Eric 了 最 近 辞 去 了 担任 了 近 10 年 之 久 的 


媒体 公司 高 省 职位 一 一 华 特 迪士尼 公司 DisneyOnline 人 
Disney.com 的 首席 技术 官 ， 将 全 部 精力 都 投入 到 他 与 
Elisabeth 创 建 的 创业 公司 WickedlySmart。 


在 教育 背景 方面 ，Eric 是 一 位 计算 机 科学 家 ， 在 耶鲁 大 
学 攻读 博士 学 位 期 间 ， 一 直 与 行业 藉 楚 David Gelernter 一 
起 从 事 人 研究 工作 ， 其 博士 论文 首次 实现 了 他 与 Gelernter 
博士 提出 的 活动 流 概 念 ， 对 蝎 面 替代 品 的 探索 工作 产生 
了 深远 的 影 啊 。 

内 上 暇 之 余 ，Eric 酷 爱 首 乐 ， 其 最 新 作品 名 为 Immersion 


Station。 这 是 他 与 环境 音乐 先锋 Steve Roach 合 作 的 结晶 ， 
在 iPhone 应 用 商店 有 售 。 


Eric 现 与 妻子 和 幼女 居住 在 班 布 里 奇 咏 。 女 儿 经 第 前 往 
其 工作 室 ， 喜 欢 鼓 揭 那 里 的 合 音 和 音 啊 合 材 的 按钮 。 


联系 Eric， 可 发 送 电 子 邮件 至 eric@wickedly-smart.com， 
也 可 访问 其 个 人 网 站 http://ericfree-man.com。 
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a Elisabeth Robson 





Elisabeth Robson 软件 工程 师 、 作 者 、 培 训 师 。 获 得 
耶鲁 大 学 计算 机 科学 人 硕士 学 位 。 在 校 期 间 就 对 技术 产 
生 了 浓厚 的 兴趣 ， 并 设计 了 一 款 可 视 化 并 行 编程 语言 
和 软件 染 构 。 

从 职业 生涯 早期 ， 她 就 致力 于 互联 网 领域 的 工作 ， 与 
人 一 起 打造 了 获奖 网 站 The Ada Project。 该 网 站 首开 先 
讶 ， 人 致力 于 帮助 计算 机 领域 的 女性 寻找 工作 和 志 同 道 
合 者 。 


当前 ， 作 为 致力 于 传播 Web 技 术 的 在 线 教育 公司 
WickedlySmart 的 联合 创始 人 ， 她 负责 图 书 、 文 章 和 视 
频 等 制作 工作 。Elisabeth 曾 担任 O?Reilly Media 的 特殊 
项 目 主管 ， 负 责 创 办 涉及 各 种 技术 主题 的 体验 工作 坊 
和 在 线 课程 ， 从 此 对 技术 培训 产生 了 浓厚 的 兴趣 。 在 
此 之 前 ，Elisabeth 就 职 于 华 特 迪 士 尼 公司 ， 主 要 负责 
数字 媒体 的 研发 工作 。 

亲眼 之 余 ，Elisabeth 要 么 投身 于 大 自然 ， 带 着 摄像 机 
去 徒步 旅行 、 骑 自行 车 或 划 皮 划 艇 ， 要 么 在 家 就 制 素 
食 大 和 餐 。 

联系 Elisabeth， 可 发 送 电 子 邮 件 至 beth@wickedlysmart. 
com， 也 可 访问 其 博客 http:Welisabethrobson.com 。 
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前 言 


让 大 脑 重 视 JavaScript。 现 在 你 正 试 着 学 习 某 些 东 西 ， 为 了 不 让 学 习 卡 壳 ， 
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475 


你 的 大 脑 也 在 帮忙 ， 大 脑 在 想 :，“ 最 好 把 空间 留 给 重要 的 事 ， 比 如 什么 动物 是 危 
险 的 ? 裸体 滑雪 是 不 是 一 个 坏 主意 ? ”那么 怎么 才能 欺骗 你 的 大 脑 ， 让 它 认为 学 





好 JavaScript 基 系 到 你 下 半生 的 幸福 呢 ? 


本 书 适合 你 阅读 吗 

我 们 知道 你 是 怎么 起 的 

我 们 视 读者 为 学 习 者 

元 认 知 : 对 思维 方式 的 思 芳 
我 们 是 如 何 做 的 

如 何 让 大 脑 听话 

导读 

技术 审 校 

致谢 
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用 大 


Javascript 速 览 


进入 JavaScript 的 世界 


昌 程 语言 ， 让 你 
上 ipt 是 一 款 纯 正 的 Web 编 程 语言 ，1 
| i 尔 强大 的 力量 。 JavaScript/E 一 未 的 事件 
JavaScript 赋 予 你 尔 就 能 够 与 用 户 互动 ， 响 应 有 趣 
二 ipt， 你 就 能 够 与 | 人 
能 够 给 网 页 添加 行为 。 有 了 JavaScript， eg 页 不 再 是 枯燥 、 达 
Oy 数据 并 将 其 用 于 网 页 中 ， 在 网 页 中 绘制 图 形 守 。 9 an 
ee | 四 动不动 地 展现 在 你 面前 。 和 掌握 JavaScript 后 ， 你 还 能 
味 、 静 态 的， 不 再 只 是 一 
予 网 页 全 新 的 行为 。 














2 
JavaScript 的 工作 原理 
如 何 编写 JavaScript 
如 何 将 JavaScript 代 码 加 入 网 页 
JavaScript， 你 进步 不 小 。 
如 何 编写 语句 ， 
变量 和 值 
切 勿 随意 命名 。 
忆 目 我 表达 - 
重复 操作 。 
while 循 环 的 工作 原理 
使 用 JavaScript 进 行 决策 ， 
进行 大 量 决策 。 
与 用 月 天仙 1 
console.1odg 详 述 
打开 控制 台 
编写 一 个 正式 的 应 用 程序 z 加 » 
如 何 将 JavaScript 代 码 加 入 网 页 ( 细 数 各 种 方式 

棒 打 忽 芍 散 
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除非 有 充分 的 理由 ， 否 则 不 要 使 用 

以 _ 或 $ 打 头 的 变量 名 。 | 
通常 保留 用 于 | 

企 者 根据 各 种 约 





如 何 给 这 样 ” 定 使 用 以 入 变量 各。 然而 ， 

驼 式 拉 我 们 的 建议 是 ， 除 非 有 充分 的 理由 | 
es (具体 是 什么 理由 你 自己 知道 ) ， 四 

| 则 不 要 使 用 这 两 种 变量 名 。 





小 心 驶 得 万 年 船 . 
有 有 给 变量 命名 时 ， 安 全 第 一 。 本 书记 
面 还 将 介绍 一 上 


\ 贴 士 。 高 
前 而 言 ， 为 确保 命名 的 安全 ， 3 
时 
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更 进一步 


你 已 经 知道 了 变量 、 类 型 、 表 达 式 等 ， 我 们 接着 往 下 介绍 。 
你 对 JavaScript 有 所 了 解 ， 实 际 上 已 经 具备 了 足够 的 知识 ， 可 以 编写 一 些 
真正 的 代码 了 : 一 些 完成 有 趣 功 能 的 代码 ， 一 些 有 人 想 使 用 的 代码 。 你 缺 
之 有 鸭 是 实际 编写 代码 鸭 经 验 ， 现 在 就 来 弥补 吧 。 如 何 弥 补 呢 ?全 里 心地 投 
入 ， 开 发 一 个 完全 使 用 JavaScript 编 写 的 休闲 类 游戏 。 我 们 目标 远大 ， 叉 
脚 路 实地 ， 一 步 一 个 脚印 。 来 吧 ， 现 在 就 开始 。 如 末 你 想 利 用 这 于 游戏 来 
一 次 创业 ， 我 们 不 会 有 任何 意见 ， 因 为 代码 是 你 的 。 

















开发 一 蒜 战 舰 游 戏 44 
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第 一 步 : 创建 循环 并 获取 输入 52 
prompt 的 工作 原理 53 
检查 用 户 的 猜测 54 
判断 是 否 击 中 56 
添加 击 中 检 闹 代码 57 
进行 游戏 后 分 析 58 








将 战舰 标记 为 
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_ 让 用 户 猜 测 





完整 的 游戏 逻辑 60 

将 战舰 标记 未 一 点 点 质量 保证 61 
被 击 沉 别 这 么 别 呆 好 不 好 65 
完善 简单 的 战舰 游戏 66 

如 何 随 机 地 指定 位 置 67 

举世 闻名 的 随机 数 生产 配方 67 

再 来 一 点 点 质量 保证 69 

说 说 代码 重用 71 
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为 使 用 你 的 第 一 个 超级 武器 作 好 准备 。 你 编写 过 一 些 代 码 ， 现 在 该 使 用 函 
数 来 提高 效率 了 。 通 过 使 用 函数 ， 你 可 编写 适用 于 各 种 不 同 环境 的 代码 。 这 些 代 
码 可 反复 重用 且 管 理 起 来 容易 得 多 。 你 还 可 以 将 通用 代码 抽取 出 来 ， 给 它 指定 一 
个 简单 的 名 称 ， 这 样 就 能 将 复杂 的 东西 抛 诸 脑 后 ， 将 精力 放 在 重要 的 内 容 上 。 你 
将 发 现 ， 函 数 不 仅 是 脚本 编写 人 员 通 往 程序 员 的 大 门 ， 还 是 JavaScript 编 程 风格 的 
核心 。 本 章 介 绍 函 数 的 基本 知识 : 机 制 以 及 工作 原理 的 方方面面 。 在 本 书 余 下 的 
篇 幅 中 ， 你 将 不 断 提 高 函数 方面 的 技能 。 下 面 就 来 为 此 打下 坚实 的 基础 吧 。 
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半数 据 排 排 从 wt 
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ML 1 4 1 + 14 + +1 ^ 1+ 人 
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女人 二 


在 JavaScript 中 ， 并 非 只 有 数字 、 字 符 串 和 布尔 值 。 前 面 编写 JavaScript 
代码 时 ， 使 用 的 都 是 基本 类 型 (简单 字符 串 、 数 字 和 布尔 值 ) ， 如 "Fido"、23 和 
true。 使 用 基本 类 型 可 完成 很 多 工作 ， 但 有 时 候 必须 处 理 更 多 数据 ， 如 购物 车 中 
的 所 有 商品 、 播 放 列表 中 的 所 有 歌曲 、 一 系列 恒星 及 其 亮度 或 整个 产品 目录 ， 为 
此 ， 需 要 更 强大 的 工具 。 对 于 这 种 按 顺 序 排列 的 数据 ， 可 使 用 JavaScript 数 组 来 存 
储 。 本 章 将 介绍 如 何 将 数据 加 入 数组 、 如 何 传递 数组 以 及 如 何 操作 数组 。 本 书后 
面 将 介绍 其 他 组 织 数 据 的 方式 ， 但 现在 先 从 数组 着 手 吧 。 
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理解 对 象 


对 和 象 镇 之 旅 


到 目前 为 止 ， 你 在 代码 中 使 用 的 都 是 基本 类 型 和 数组 。 另 外 ， 
你 使 用 简单 语句 、 条 件 、for/while 循 环 和 函数 来 编写 代码 ， 这 种 编码 方 
式 的 过 程 化 程度 极 高 ， 不 完全 是 面向 对 象 的 。 实 际 上 ， 这 根本 就 不 是 面向 
对 象 的 。 你 确实 偶尔 在 不 知 不 觉 间 使 用 了 一 些 对 象 ， 但 从 未 编写 自己 的 对 
象 。 现 在 ， 该 放弃 这 种 枯燥 的 过 程 型 编程 方式 ， 转 而 创建 一 些 自己 的 对 象 
了 。 在 本 章 中 ， 你 将 了 解 为 何 使 用 对 象 可 让 生活 更 美好 ， 当 然 这 是 从 编程 
意义 上 说 的 ， 因 为 本 书 只 负责 提高 你 的 JavaScript 技 能 ， 而 不 能 让 你 变 得 更 
时 尚 。 需 要 指出 的 是 ， 到 了 对 象 镇 ， 你 会 乐 不 思 罚 ， 可 别 忘 了 给 我 们 寄 明 
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与 网 页 交互 


了 解 DOM 

你 的 JavaScript 水 平 有 了 很 大 的 提高 。 事 实 上 ， 你 从 门外汉 成 了 脚本 编写 人 员 ， 又 成 了 
程序 员 ， 但 还 有 一 些 东 西 疫 学 。 要 充分 利用 你 的 JavaScript 技 能 ， 就 必须 知道 如 何 与 代码 所 属 的 
网 页 交互 。 只 有 这 样 ， 你 才能 编写 出 动态 网 页 : 能 够 对 用 户 操作 作出 响应 的 网 页 ， 能 够 在 加 载 
后 自动 更 新 的 网 页 。 那 么 ， 如 何 与 网 页 交互 呢 ?” 使 用 DOM， 即 文档 对 象 模型 (document object 
model) 。 本 和 章 将 详细 介绍 DOM， 看 看 如 何 使 用 它 和 JavaScript 赋 了 予 网 页 新 功能 。 
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类 型 、 相 寺 、 和 转换 志 
系统 地 讨论 类 型 


该 系统 地 讨论 类 型 了 。JavaScript 的 优点 之 一 是 ， 你 无 需 知 道 这 种 语言 的 很 多 细节 ， 
就 可 以 使 用 它 来 做 很 多 事情 。 但 要 真正 掌握 这 门 语言 、 提 升水 平 ， 做 到 人 生 中 梦 寨 以 
求 的 事情 ， 你 必须 对 类 型 了 如 指 掌 。 还 记得 本 书 前 面 是 怎么 说 JavaScript 的 吗 ? 是 不 是 
说 它 命 不 好 ， 不 是 出 生 在 高 贵 的 学 术 殿 堂 ， 也 未 经 同行 审阅 ?确实 如 此 ， 但 非 科班 出 身 
不 妨碍 史 蒂 夫 .乔布斯 和 比尔 : 盖 茨 取得 成 功 ， 对 JavaScript 来 说 亦 如 此 。 这 确实 意味 着 
JavaScript 的 类 型 系统 并 不 特别 续 窗 ， 我 们 会 发 现 它 有 一 些 怪兽 。 不 过 不 用 担心 ， 本 童 将 
把 这 些 怪 癖 解释 得 一 清二 楚 ， 你 很 快 就 能 避免 各 种 与 类 型 相关 的 难堪 错误 。 
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编 与 一 个 应 用 程序 


系 上 工具 腰带 ， 就 是 那个 吉 括 你 新 学 的 所 有 编码 技能 、DOM 知 识 其 至 
HTML&CSS 知 识 的 工具 腰带 。 本 章 将 结合 使 用 这 些 知 识 打造 第 一 个 货真价实 的 
Web 应 用 。 不 再 是 只 有 一 稻 战 舰 和 一 行 藏身 之 地 的 小 儿科 游戏 ， 本 章 将 提供 全 面 
的 体验 : 又 大 又 漂亮 的 游戏 板 、 多 艘 战舰 、 获 取 用 户 输入 …… 这 些 都 包含 在 一 
个 网 页 中 。 我 们 将 使 用 HTML 定 义 游戏 网 页 的 结构 ， 使 用 CSS 设 置 游戏 的 视觉 样 
式 ， 并 使 用 JavaScript 代 码 定义 游戏 的 行为 。 坐 好 了 ， 我 们 将 全 力 以 赴 ， 将 油门 踩 
到 底 ， 编 写 一 些 正式 的 代码 。 
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处 理事 件 


阅读 完 本 章 ， 你 的 编程 方式 再 不 似 从 前 。 到 目前 为 止 ， 你 编写 的 代码 通 
常 都 是 按 从 上 到 下 的 顺序 执行 的 。 虽 然 你 的 代码 要 复杂 些 ， 还 使 用 了 一 些 函 数 、 
对 象 和 方法 ， 但 从 某 种 程度 上 说 ， 它 们 都 是 按部就班 地 执行 的 。 然 而 ，JavaScript 
代码 通常 不 是 这 样 编写 的 ， 大 多 数 JavaScript 代 码 都 是 事件 响应 式 的。 很 抱歉 到 现 
在 才 告 诉 你 这 一 点 。 那 么 都 是 什么 样 的 事件 呢 ? 用 户 单 击 网 页 、 通 过 网 络 收 到 数 
据 、 定 时 器 到 期 、DOM 发 生变 化 等 。 事 实 上 ， 在 浏览 器 中 ， 幕 后 始终 有 各 种 事件 
在 不 断 发 生 。 本 章 将 反思 我 们 的 编码 方式 ， 学 习 如 何 编写 响应 事件 的 代码 以 及 为 
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绩 数 是 一 等 公民 
自由 的 函数 


熟知 函数 你 就 能 成 为 明星 。 无 论 在 什么 行业 和 学 科 ， 都 存在 让 大 师 有 别 于 蔡 壮 众生 的 
重要 分 水 岭 ， 就 JavaScript 而 言 ， 这 个 分 水 岭 就 是 熟知 函数 。 在 JavaScript 中 ， 函 数 不 可 或 缺 ， 
很 多 设计 和 组 织 代码 的 技巧 都 要 求 你 精通 并 熟练 地 使 用 函数 。 通 往 精通 函数 的 学 习 道 路 很 有 
趣 ， 但 和 常 当 会 让 人 迷惑 不 解 ， ee Wt 本 莉 将 更 深入 地 介绍 JavaScript 员 | 
数 ， 你 将 像 刘 姥 姥 进 了 大 观 园 ， 见 到 一 些 奇异 、 上 古怪 而 神奇 的 东西 。 
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可 恶 ! Jvdy 又 
说 对 了 。 


区 名 芒 数 、 作 用 域 和 闭 包 


系统 地 讨论 函数 


你 已 经 全 面 了 解 了 函数 ， 但 还 需 更 深入 地 学 习 。 本 章 将 再 进一步 ,深入 函数 的 
核心 ， 演 示 如 何 娴熟 地 利用 函数 。 这 一 章 虽 然 不 太 长 ， 但 涵盖 的 知识 点 非常 多 ;阅读 完 本 
章 后 ， 你 的 JavaScript 表 达能 力 将 超 平 你 的 想象 。 你 还 将 为 与 人 协作 编写 代码 或 使 用 开源 
JavaScript 库 作 好 准备 ， 因 为 我 们 将 介绍 一 些 与 函数 相关 的 常见 编码 习惯 和 约定 。 如 果 你 从 未 
听 说 过 匿名 函数 和 闭 包 ， 那 真是 来 对 了 地 方 。 


















函数 的 另 一 面 476 
如 何 使 用 匿名 函数 477 
别 这 么 哆 唆 好 不 好 479 
国 数 是 在 什么 时 候 定 义 的 ? 这 要 看 情况 483 
为 何 fl1y 未 定义 484 
如 何 竹 套 函 数 485 
嵌 套 对 作用 域 的 影响 486 
词法 作用 域 简 介 488 
词法 作用 域 的 有 趣 之 处 489 
再 谈 函 数 491 

像 与 辕 包 相关 。 量 们 末 学 团 包 到 底 是 什么 495 

义 半 包 ， 看 看 能 否 利 周 闭 包 

来 战胜 绝 。 启 定 国 数 496 
使 用 闭 包 实 现 神奇 的 计数 絮 498 
揭秘 499 
通过 将 国 数 表 达 式 用 作 实 参 来 创建 闭 包 501 
闭 包 包含 的 是 实际 环境 ， 而 非 环 境 的 副本 502 
使 用 事件 处 理 程序 来 创建 闭 包 503 
用 作 按 钮 单 击 处 理 程序 的 闭 包 的 工作 原理 506 





高 级 对 象 构 造 技巧 


创建 对 象 


到 目前 为 止 ， 我们 都 以 手动 方式 创建 对 象 : 对 于 每 个 对 象 ， 都 使 用 对 
象 字面 量 来 指定 其 所 有 属性 。 小 规模 地 创建 对 象 时 ， 这 没有 问题 ， 但 要 编写 
正式 的 代码 ， 需 要 使 用 更 好 的 方式 。 这 正 是 对 象 构造 函数 的 用 武之 地 。 使 用 
构造 函数 ， 可 更 轻松 地 创建 对 象 ， 还 可 让 所 有 对 象 都 采用 相同 的 设计 蓝图 

也 就 是 说 ， 使 用 构造 函数 可 确保 所 有 对 象 都 包含 相同 的 属性 和 方法 。 通 过 使 
用 构造 函数 ， 编 写 的 对 象 代码 将 简洁 得 多 ， 而 且 创建 大 量 对 象 时 不 容易 出 
错 。 阅 读 完 本 章 后 ， 你 谈论 起 构造 函数 ， 就 会 像 是 在 对 象 镇 长 大 的 一 样 。 





使 用 对 象 字 面 量 创建 对 象 

按 约 定 创 建 对 象 

对 象 构造 函数 简介 

如 何 创建 构造 函数 

如 何 使 用 构造 函数 

i 数 的 工作 原理 
能 在 构造 函数 中 定义 方法 

a 

试 驾 一 些 新 车 

















不 要 将 对 象 字面 量 弃 奎 政 屡 
用 一 个 对 象 字 面 量 蔡 代 所 有 实 参 
修改 构造 图 效 Ca 
理解 对 象 实例 
即便 是 创建 好 的 对 象 ， 也 可 以 有 独特 的 属性 
内 置 构造 冰 数 
数组 对 象 


其 他 内 管 对 象 
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使 赂 原型 


超 强 的 对 和 象 创建 方式 


学 会 如 何 创建 对 象 仅仅 是 个 开始 。 该 充实 一 些 关 于 对 象 的 内 容 了 。 我 们 需 
要 在 对 象 之 间 建立 关系 和 共享 代码 的 方法 ， 需 要 扩展 和 改进 既 有 对 象 。 换 句 话 
说 ， 我 们 需要 更 多 的 工具 。 在 本 章 中 你 将 看 到 ，JavaScript 的 对 象 模型 非常 强大 ， 
但 它 与 标准 面向 对 象 语言 的 对 象 模型 和 消 有 不 同 。JavaScript 采 用 的 不 是 基于 类 的 
面向 对 象 系统 ， 而 是 更 强大 的 原型 模型 ， 其 中 的 对 象 可 继承 和 扩展 其 他 对 象 的 行 
为 。 这 有 何 优 点 呢 ? 你 马上 就 会 看 到 。 现 在 就 开始 吧 。 

































































先 来 介绍 一 种 更 好 的 对 象 图 565 
再 谈 构 造 尔 数 : 它 能 让 我 们 重用 代码 ， 但 效率 如 何 呢 566 
。 重复 的 方法 真是 个 问题 吗 568 
， object 重 原型 是 什么 569 
-一 | 继承 原型 570 
hasOwnProperty() 继承 的 工作 原理 S71 
// 其 他 方法 重 写 质 型 有 
如 何 设 置 原型 576 
原型 是 动态 的 582 
2 一 不 独 原 型 方法 sit 更 有 趣 的 实现 584 
species: "Canine" 再 谈 属 性 sitting 的 工作 原理 S85 
部 bark() 如 何 设计 表演 大 589 
| 建立 原型 链 591 
原型 链 中 的 继承 原理 592 
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创建 表演 大 实例 598 
表演 大 原型 最 后 的 整理 602 
league: “Webville” Dog.call 详 解 604 
ml 小 狗 原型 并 非 原型 链 的 终点 607 
ee 充分 发 挥 继承 的 威力 之 重 写 内 置 行为 608 
充分 发 挥 继承 的 威力 之 扩展 内 置 对 象 610 
JavaScript 大 统一 理论 612 
ShowDog 使 用 对 象 改善 生活 612 
name: “Scotty” 整合 起 来 613 
brood Sous ener 是。 继续 学 习 613 
handler: “Cookie” 
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附录 ” 侈 泌 内容 

未 涉足 的 十 大 主题 

我 们 介绍 了 大 量 的 基本 知识 ， 本 书 也 即将 
接近 尾声 。 我 们 会 想念 你 的 。 放 手 让 你 去 独 闻 天 
涯 前 ， 我 们 想 在 你 的 行囊 中 再 准备 点 东西 ， 不 然 会 
不 放心 。 这 个 附录 篇 幅 较 短 ， 无 法 吉 括 你 需要 知道 
的 一 切 。 实 际 上 ， 它 最 初 确实 涵盖 了 你 需要 知道 但 
本 书 前 面 未 介绍 的 一 切 JavaScript 编 程 知 识 ， 但 字 
体 小 得 谁 都 看 不 请 。 因 此 ， 我 们 删除 了 其 中 的 大 部 
分 内 容 ， 只 留 下 最 重要 的 十 大 主题 。 

等 你 阅读 完 这 个 附录 后 ， 本 书 就 真 的 结束 了 。 不 过 
别 忘 了 索引 。 (也 是 必 读 的 ! ) 


#1. JQuery 

#2. 更 多 地 使 用 DOM 

#3. 对 家 window 

#4. arguments 

#5. 处 理 异常 

#6. 使 用 addEventListener 添 加 事件 处 理 程序 
#7. 正则 表达 式 

#8. 递归 

#9. JSON 

#10. 服务 右 端 JavaScript 
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如 何 使 用 本 刷 


PD 9 A 
I HH 他 们 竞 然 将 这 样 的 内 容 


放 在 一 本 JavaSceript 周 岂 
中 ， 真 是 难以 置信 ! 


本 书 适合 你 吗 ? 
本 书 适 合 已 购买 它 
将 成 为 一 份 很 棒 的 


礼物 。 em- 


个 读者 最 关心 的 问 题 ， 在 一 本 JavaScript 





这 里 和 将 回答 下 面 这 
0 为 何 包含 这 样 的 内 容 ? 


XXV 


如 何 使 用 本 书 


4 人 万 ‘去 
本 书 造 六 你 阅 关 吧 

如 条 对 于 下 面 的 每 个 问题 ， 你 的 回答 都 是 肯定 的 ， 那 

么 本 书 就 是 为 你 而 写 的 。 
所 谓 现 代 Web 浏 览 器 ， 指 的 

G) 你 有 安装 了 现代 Web 浏 览 器 和 文本 编辑 器 的 计算 机 吗 ? 4 下 取 产 版 的 Safari、 Chrome 
和 Firefox, 以 及 9 或 更 高 版 
本 的 |E。 

(2) 你 想 学 习 、 理 解 并 牢记 最 佳 的 JavaScript 编 程 技巧 和 最 新 

的 相关 标准 吗 ? 


人 @) 相 比 于 枯燥 乏味 的 学 术 讲座 ， 你 更 喜欢 晚宴 上 激动 人 心 
的 交谈 吗 ? 
市 场 部 提示 : 只 要 有 信用 卡 ， 任 何人 
都 可 以 购买 本 书 。 


你 该 对 本 书 退 名 三 作 咀 


只 要 对 下 面 的 任何 一 个 问题 的 回答 是 肯定 的 ， 你 就 应 
对 本 书 退 避 三 舍 。 


》 你 对 Web 开 发 一 无 所 知 吗 ? 





对 你 来 说 ，HTML 和 (CSS 犹如 天 书 吗 ? 倘若 如 此 ， 你 也 许 
应 该 先 阅读 《Head First HTML 与 CSS》 ， 搞 清楚 如 何 编 
写 网 页 ， 再 考虑 学 习 JavaScript。 


@@) 你 是 Web 开 发 高 手 ， 想 要 的 是 一 本 参考 手册 吗 ? 


(@)》 你 害怕 尝试 不 同 的 东西 吗 ” 你 宁愿 穿 普通 的 衣服 ， 也 不 
穿 格 子 配 条 纹 的 衣服 吗 ? 你 认为 既然 JavaScript 对 象 被 赋 
予 人 性 ， 那 么 技术 书籍 就 应 该 一 本 正经 吗 ? 


名人 9 
SS 





型 
了 中 


我 们 知 志 你 是 怎么 想 的 
这 书 一 扩 部 不 严肃 。 
那些 图 记者 是 干什么 用 的 ? 


这 样 也 能 学 会 JavaScript 吧 ? 


很 重要 ， 
我 们 还 知 记 大 脑 是 和 已 么 想 的 

大 脑 齐 望 新 奇 ， 它 不 断 地 寻找 、 扫 描 和 等 待 不 同 寻 铝 的 东西 。 它 天 生 
如 此 ， 助 你 永保 活力 。 

这 年 头 ， 你 不 太 可 能 成 为 老虎 的 盘 中 餐 ， 但 你 的 大 脑 依 然 保 持 警 惕 ， 
只 是 你 从 来 没有 意识 到 而 已 。 

当 你 遇 到 寻常 而 普通 的 东西 时 ， 大 脑 是 如 何 应 对 的 呢 ? 它 竭 尽 所 能 ， 
避免 这 些 东 西 干 扰 它 做 重要 的 工作 一 一 记 住 重要 的 东西 。 它 不 会 劳 神 
去 记 住 无 聊 的 东西 ， 因 为 这 些 东西 显然 是 不 重要 的 。 

大 脑 怎么 知道 哪些 东西 重要 呢 ? 假设 有 一 天 你 去 徒步 旅行 ， 面 前 突然 
出 现 了 一 只 老虎 ， 你 的 大 脑 和 身体 会 有 何 反 应 呢 ? 


神经 元 受到 刺激 ， 情 绪 激 动 ， 肾 上 腺 素 激增 。 

大 脑 于 是 明白 : 

这 一 定 很 重要 ! 可 别 忘 了 ! 

但 假设 在 家 里 或 图 书馆 学 习 、 备 考 或 学 习 老板 认为 需要 一 周 甚至 
十 天 才能 掌握 的 高 深 技术 ， 此 时 你 所 处 的 环境 很 安全 ， 根 本 不 会 
有 老虎 。 

大 脑 竟 尽 所 能 地 帮助 你 ， 确 保 稀缺 资源 不 会 被 显然 不 重要 的 内 
容 占用 ， 而 将 它们 留 给 真正 重要 的 东西 ， 如 老虎 、 火 灾 、 不 要 
穿着 短 袖 短 裕 去 滑雪 等 。 

可 是 ， 你 没 法 直截了当 地 向 大 脑 发 号 施 令 : 不 管 这 本 书 有 多 乏 
味 ， 也 不 管 我 当前 对 里 氏 震 级 有 多 不 感 兴趣 ， 拜 托 你 把 这 些 内 
容 记 下 来 吧 。 

























大 好 了。 只 剩 下 
658 页 枯燥 互 味 
的 内 容 了 。 












你 现在 的 位 置 >xxvii 


如 何 使 用 本 书 


我 们 视 谋 涯 为 学 习 省 
二胡 本 邮 ) 首先 你 得 明 自 ， 其 次 你 得 涉 记 ， 但 这 并 不 半死 记 卫 训 
检 才 能 学 全 全 心理 学 的 最 新 研究 表明 ， 学 习 过 程 远 比 较 该 文字 要 丰 宫 人 。 
知道 如 何 激活 大 脑 。 


本 书 遵循 的 一 些 学 习 原 则 


Ee 的 话 言 ，JavaScript 代 码 被 

人 性 ea ~ ~ ~ EE EO Xl 监 2 Ee 一 

志 用 视觉 化 元 素 。 图 片 比 文字 更 容易 记忆 ， 并 可 极 入: 送 给 浏览 器 。 这 与 众 不 同 ! 
内 习 效率 (可 将 记忆 和 理解 程度 提高 8999) 。 图 片 还 让 知 ”W fm 


本 人 起 来 更 容易 。 通 过 将 文字 放 在 相关 图 片 的 内 部 或 f，_， 


~、 





二 不 是 放 在 图 片 的 下 面 或 另 一 页 ， 可 将 学 习 者 解决 相关 全 下 b 
的 能 力 提高 两 们 。 “代码 找到 了 ， 给 你 。” 


使用 个 性 化 的 对 话 。 最 新 的 研究 表明 ， 相 比 于 一 不 二 

2 放 气 ，“ 教 岳 采用 第 -人称 以 对 话 的 方式 讲 角 时， 学 生 的 考试 成 和、 
,全 们 使 用 口语 化 的 语言 讲 故 事 ， 而 不 是 一 本 正经 地 说 教 。 注 S 
,4 聊 宣 对 话 和 桔 燥 讲座 ， 哪 个 更 能 激发 你 的 兴趣 虹 ? 








在 我 看 来 ， 就 应 该 将 
JavaSeript 代 码 放 在 
<head> 元 素 中 。 







、 二 学 习 首 更 深入 地 思考 。 换 而 言 之 ， 如 果 你 不 去 积极 
Se ,经 元 大脑 就 不 会 有 太 大 的 反应 。 要 让 学 习 者 能 够 解 共 
得 出 结论 ， 举一反三 ， 就 必须 让 他 心 和 好奇、 对 学 习 
入 坝 性 并 沉醉 其 中 。 为 此 ， 需 要 让 学 习 者 应 对 挑战、 人 十 


| N 呈 答 引信 深思 的 问题 ， 并 完成 一 些 需要 左右 脑 和 多 个 启 \ 
I ”参与 的 活动 。 
让 纺 交 这 党。 | 






引起 你 的 兴趣 后 ， 我 要 说 
的 是 应 愤 周 全 局 变量 。 





中 了 这 人 > 5 响 性 能 和 网 
er ,| 起 并 保持 读者 的 兴趣 。 大 家 都 有 这 样 的 经 验 :心里 起， 
页 还 没 看 完 就 歇 睡 连连。 大脑 只 会 对 不 同 寻 常 、 有 起 、 
,。 计 人 人 眼球， 出手 意料 的 东西 感 兴趣 。 面 对 新 的 高 深 撤 术 ， 如 二 el 


过 程 不 再 枯燥 乏味 ， 就 会 事半功倍 。 

各 不 由 交际 ， 和 牛角 记 信 一 实 东 西 ， 在 避 大 程度 上 取决 对 信和 不 是 
动心 下 从 知道、 代 包 东 硬 ， 也 会 记 人 动人 必 下 的 东西。 这 二 0 区: 
用 。 你 会 信和 人 的 雪 训 ， 而 是 在 玩 寺 字 游戏 、 学 习 人 人 孝 认 交代 人 情 乏 。 
男孩 和 小 多 尖 站 时 训 然 全 的 惊讶 、 好奇、 开心 、 颖 下 和 做 祝 天 





XXViii 前 言 


元 认 知 : 对 思维 方式 的 思考 


如 末 你 有 心 学 习 ， 还 想 学 得 更 快 、 更 深 ,就 应 专注 于 你 如 何 才能 做 到 专注 ， 思 
竹 你 的 思维 方式 ， 了 解 你 的 学 习 方 法 。 


大 多 数 人 在 成 长 过 程 中 都 没有 接触 过 元 认 知 和 学 习 理论 。 每 个 人 都 被 要 求学 
习 ， 可 知道 如 何 学 习 的 人 少 之 又 少 。 


我 们 认为 ， 既 然 你 手 捧 本 书 ， 肯 定 很 ey ee 
序 。 你 可 能 不 想 花 太 多 时 间 ， 而 只 想 记 住 阅 读 的 内 容 ， 并 能 够 付 诸 
应 用 。 为 此 ， 你 必须 理解 这 些 内 容 。 为 从 本 书 (或 任何 图 书 或 学 习 
过 程 ) 获得 最 大 的 收获 ， 就 要 对 大 脑 负 责 ， 因 为 它 将 决定 学 习 效 
5 

秘诀 在 于 让 大 脑 认 为 你 学 习 的 新 内 容 非常 重要 ， 就 像 老 虎 一 样 生死 
依 关 。 不 然 ， 你 的 大 脑 将 不 断 与 你 唱 反 调 ， 不 惜 一 切 手段 地 排斥 这 
些 新 内 容 。 





中] 


SP 


如 何 让 大 脑 认 为 JavaScript 与 老虎 一 样 重要 ? 

有 缓慢 乏味 的 方式 ， 也 有 快速 高 效 的 方式 。 缓 慢 的 方式 就 是 没完 
没 了 地 重复 。 你 知道 ， 即 便 是 最 无 趣 的 主题 ， 只 要 不 断 重复 ， 就 
能 让 人 学 会 并 牢记 在 心 。 重 复 多 了 ， 你 的 大 脑 就 会 说 : 这 个 好 像 对 他 来 说 并 不 重 

要 ， 可 他 看 了 又 看 ， 我 只 能 认为 这 个 肯定 很 重要 了 。 


快速 的 方式 是 竭尽 所 能 地 刺激 大 脑 活 动 ， 尤 其 是 不 同类 型 的 大 脑 活 动 。“ 我 们 视 读 
者 为 学 习 者 ”中 提 到 的 做 法 是 刺激 大 脑 活动 的 重要 组 成 部 分 ， 实 践 表 明 ， 它 们 都 有 
助 于 让 大 脑 听 话 。 人 例如， 研究 表 明 ， 通 过 将 撕 述 文字 放 在 图 片 中 ， 而 不 古 图 片 说 明 
或 正文 等 其 他 地 方 ， 可 让 大 脑 明白 文字 和 图 片 的 关系 。 这 将 加 大 对 神经 元 的 刺激 ， 
而 对 神 双 元 的 刺激 越 大 ， 就 意 : 味 着 大 脑 认为 相关 的 内 容 值 得 关注 ， 将 其 记 住 的 可 能 

性 也 就 越 大 。 


对 话 式 风格 可 提高 学 习 效 率 ， 因 为 人 们 意识 到 目 己 在 参与 对 话 时 ， 就 知道 为 避免 对 
话 中 断 ， 必须 更 加 集中 注意 力 。 神奇 的 是 ， 大 脑 并 不 介意 你 古 在 与 图 书 对 话 。 田 一 
方面 ， 如 东 写 作风 格 一 本 正经 而 且 乏 味 ， 大 脑 将 以 为 你 是 坐 在 教室 里 听讲 座 ， 听 众 
都 抱 着 销 极 的 态度 ， 红 昏 欲 睡 也 没有 关系 。 


然而 ， 图 片 和 对 话 风格 只 是 冰山 一 和 角 。 




















东西 呢 ? 
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你 现在 上 





位置 XXix 


如 何 使 用 本 书 


我 们 是 如 何 做 的 


我 们 使 用 图 片 ， 因 为 大 脑 对 视觉 元 素 感 兴趣 ， 而 对 文字 不 感 兴 趣 。 在 大 脑 看 来 ,千言 
万 语 也 抵 不 过 一 张 图 片 。 结 合 使 用 图 片 和 文字 时 ， 我 们 将 文字 上 租 在 图 片 中 ， 因 为 相 比 
于 出 现在 图 片 说 明 或 正文 中 ， 摘 述 文字 出 现在 图 片 中 可 提高 大 脑 的 工作 效率 。 


我 们 采用 不 同 的 方式 重复 同样 的 东西 ， 通 过 不 同 的 媒介 刺激 不 同 的 感官 ， 让 这 些 内 容 
留存 在 大 脑 的 不 同 区 域 。 


我 们 以 你 意 想 不 到 的 方式 使 用 概念 和 图 片 ， 因 为 大 脑 喜欢 新 奇 。 同 时 ， 使 用 图 片 和 概 
念 时 ， 我 们 知 加 一 些 市 有 感情 色彩 的 东西 ， 因 为 大 脑 多 受 感 情 的 支配 。 你 更 容易 记 住 
触动 感情 的 东西 ， 即 便 这 种 感情 只 是 小 小 的 幽默 、 惊 奇 或 趣味 。 


我 们 采用 个 性 化 的 对 话 风格 ， 因 为 相 比 于 被 动 地 倾听 ， 当 大 脑 认为 你 正在 对 话 时 ， 就 
会 更 加 集中 注意 力 ， 即 便 这 种 对 话 古 在 你 和 图 书 之 间 进 行 时 亦 古 如 此 。 


书 中 包含 100 多 个 活动 ， 因 为 相 比 于 纸上谈兵 ， 当 你 真 刀 真 枪 地 做 事 时 ， 大 脑 更 容易 学 
会 并 记 住 知识 。 书 中 的 练习 既 有 挑战 性 ， 又 在 读者 的 能 力 范围 内 ， 因 为 这 种 练习 是 大 
多 数 人 的 最 爱 。 


我 们 采用 了 多 种 学 习 风 格 ， 因 为 有 人 喜欢 循序 渐进 ， 有 人 喜欢 先 了 解 总 体 情 况 ， 还 有 
人 只 想 看 代码 示例 。 无 论 你 是 什么 样 的 学 习 风 格 ， 都 将 受益 于 以 多 种 不 同方 式 展现 的 
相同 内 容 。 
我 们 兼顾 左 脑 和 右 脑 ， 因 为 大 脑 越 是 沉醉 其 中 ， 你 学 会 并 记 住 的 可 能 性 越 大 ， 同 时 能 
够 集中 注意 力 的 时 间 越 长 。 通 过 让 左 脑 和 右 脑 轮流 工作 和 休息 ， 可 提高 学 习 效 率 ， 延 
长 学 习 时 间 。 


我 们 从 不 同 的 角度 展现 故事 和 练习 ， 因 为 在 必须 做 出 评估 和 判断 时 ， 大 脑 对 知识 的 理 
解 通常 会 更 深 。 

蔬 中 包含 一 些 比较 有 挑战 性 的 练习 和 没有 简单 答案 的 问题 ， 因 为 大 脑 活跃 起 来 时 ， 通 
常 更 容易 学 会 并 记 住 知识 。 这 就 像 仅 仅 在 健身 房 看 人 锻炼 并 不 能 塑身 一 样 。 我 们 竟 尽 
所 能 ， 确 保 让 你 昔 思 守 想 时 ， 想 的 都 是 重要 的 问题 ， 而 不 在 难以 理解 的 示例 、 充 斥 术 
语 的 难 解 文本 上 浪费 脑力 。 

我 们 在 故事 、 示 例 和 图 片 等 中 使 用 人 物 ， 因 为 你 也 是 人 ， 你 的 大 脑 会 更 专注 于 人 而 不 
是 物 。 


我 们 遵循 80/20 规 则 。 我 们 假设 你 的 目标 是 成 为 JavaScript 开 发 高 手 ， 不 会 只 读 这 一 本 
书 。 有 鉴于 此 ， 本 书 并 非 无 所 不 包 ， 只 介绍 了 你 真正 需要 的 内 容 。 
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烧 凶 游戏 


型 
了 中 


如 何 引 大 脑 听 活 


我 们 该 做 的 都 做 了 ， 余 下 的 就 得 靠 你 自己 了 。 下 面 的 小 
提示 只 征 起 点 ， 你 需要 倾听 大 脑 的 心声 ， 找 出 哪些 做 法 








请 将 下 面 这 部 分 
贴 到 冰箱 上 ， 


站 证 三 


另 下 米 ， 


4》 别 着 急 。 理 解 的 越 多 ， 需 要 记忆 的 就 越 少 。 
不 要 只 是 埋头 苦 读 ， 时 不 时 地 停 下 来 想 一 想 。 
看 到 问题 时 ， 不 要 马上 去 翻 答案 ， 要 想象 有 
人 问 你 这 个 问题 。 大 脑 想 得 越 深 ， 学 会 并 记 
住 相关 内 容 的 可 能 性 越 大 。 


人 @O) 做 练习 ， 记 笔记 。 
不 能 指望 我 们 来 奉 你 做 这 些 练习 ， 不 然 ， 与 
让 人 替 你 锻炼 何 异 。 拿 起 笔 来 ， 亲 上 自动 手 。 
大 量 的 证 据 表 明 ， 在 学 习 期 间 做 些 体力 活动 ， 


可 提高 学 习 效率 。 


人 @) 阅读 “世上 没有 愚蠢 的 问题 ”。 
一 个 都 不 要 落下 。 这 些 都 是 核心 内 容 ， 绝 非 可 
有 可 无 的 ， 千 万 不 要 跳 过 。 


(@ 让 阅读 本 书 成 为 你 睡 前 的 最 后 一 件 事 ， 至 少 不 要 做 
其 他 有 挑战 性 的 事情 。 
你 放下 书本 后 ， 学 习 过 程 (尤其 是 变 成 长 期 记 
忆 的 过 程 ) 还 在 继续 。 大 脑 需要 消化 的 时 间 ， 
如 果 在 此 期 间 你 在 做 其 他 事情 ， 就 会 忘记 有 些 
刚 学 到 的 知识 。 











人 @ 多 喝 水 。 
身体 水 分 充足 时 ， 大 脑 最 清晰 。 如 琳 映 体 缺 少 
水 分 〈 可 能 你 还 未 感到 口 淘 时 就 会 出 现 这 种 情 
况 ) ， 人 的 认 知 能 力 就 会 下 降 。 


对 你 来 说 管用 ， 哪 些 不 管用 。 去 试 试 吧 。 


(@) 大 声 读 出 来 。 





朋 读 会 激活 大 脑 的 另 一 个 部 分 。 要 理解 什么 东西 
或 加 深 对 其 的 记忆 时 ， 可 将 其 大 声 表 读 出 来 。 更 
佳 的 做 法 是 ， 和 尝试 同人 进行 解释 。 这 样 你 将 学 得 
更 快 ， 还 可 能 发 现 阅 读 时 没有 发 现 的 新 东西 。 





倾听 大 脑 的 心声 。 

注意 大 脑 古 人 否 不 开 重负。 如 东 你 发 现 目 己 开 始 变 
得 敷衍 了 事 或 看 后 就 乓 ， 就 说 明 该 休 有 了 。 疲 矢 
到 一 定 程 度 后 ， 如 东 还 不 休息 ， 就 会 欲 速 而 不 达 ， 


甚至 影响 学 习 兴 趣 。 








心 有 感 悟 。 


这 样 大 脑 才 知道 你 陪读 的 内 容 很 重要 。 置 导 到 故 
事 中 ， 给 图 片 添 加 说 明 。 即 便 古 抱 忽 笑话 太 鉴 脚 ， 
也 胜 过 蓝 无 感触 。 


动手 实践 。 


在 新 设计 的 项 目 中 应 用 学 到 的 知识 ， 抑 或 改造 
既 有 的 项 目 。 只 要 动手 实践 就 好 ， 这 样 可 获得 一 
些 做 练习 和 活动 时 无 法 获 得 的 经 验 。 你 需要 的 
只 是 铅笔 和 需要 解决 的 问题 一 一 一 个 可 能 受益 于 
JavaScript 的 问题 。 





睡 好 觉 。 


为 学 习 编 程 ， 需 要 在 大 脑 中 建立 大 量 新 的 关联 。 
多 睡 完 吧 ， 这 大 有 神 益 。 


如 何 使 用 本 书 


;十 
导 广 

这 是 一 本 学 习 用 书 ， 而 不 是 参 芳 手册 。 本 书 所 有 的 内 容 都 是 精心 编写 的 ， 扫 除了 所 有 
可 能 的 拦路 虎 。 但 读 第 一 过时， 你 还 是 得 从 开 尖 读 起 ， 因 为 本 书 假设 你 已 经 理解 了 前 
面 介 绍 过 的 内 容 。 


我 们 介绍 JavaScript 的 优点 ， 同 时 提醒 你 注意 其 不 足 之 处 。 


JavaScript 并 非 出 身 于 象牙 塔 的 语言 ， 示 经 学 术 同 仁 长 时 间 的 审核 。JavaScript 应 运 而 
生 ， 在 早期 的 浏览 器 社区 长 大 。 因 此 需要 注意 ，JavaScript 有 优点 ， 也 有 不 足 。 但 总 体 
而 言 ，JavaScript 相 当 出 色 ， 条 件 是 你 能 妥善 地 使 用 它 。 


本 书 介 绍 如 何 充 分 发 挥 JavaScript 的 优势 ， 同 时 会 指出 它 的 不 足 之 处 ， 让 你 能 够 规 吉 。 
我 们 并 未 介绍 这 门 语言 的 每 个 方面 。 
对 于 JavaScript， 需 要 学 习 的 地 方 有 很 多 。 本 书 并 非 参 考 手册 ， 而 是 学 习 指 南 ， 因 此 并 


未 涵盖 JavaScript 的 方方面面 。 我 们 的 目标 是 教 你 JavaScript 的 基本 知识 ， 让 你 能 够 读 懂 
任何 参考 手册 ， 还 能 使 用 JavaScript 做 你 想 做 的 任何 事情 。 

本 书 介绍 的 是 在 浏览 器 中 执行 的 JavaScript。 

广 蜗 絮 不 仅 是 最 常见 的 JavaScript 运 行 环境 ， 还 是 最 方便 的 运行 环境 (开始 JavaScript 
编程 的 唯一 要 求 是 ， 一 台 安 装 了 文本 编辑 器 和 训 览 器 的 计算 机 ) 。 在 训 览 器 中 运行 
JavaScript 还 意味 着 你 能 马上 看 到 结果 : 编写 代码 后 ， 只 需 重新 加 载 网 页 ， 就 能 明白 其 
功能 。 

本 书 提 倡 遵循 最 佳 实 践 ， 确 保 代 码 结构 良好 、 易 于 理解 。 


你 希望 编写 的 代码 对 所 有 的 人 来 说 部 多 于 阅读 和 理解 ， 并 能 在 新 的 放宽 副 中 正确 运 
行 。 你 希望 以 最 为 简单 直接 的 方式 编写 代码 ， 在 完成 工作 的 同时 保质 保 量 。 本 书 将 教 
你 编写 结构 民 好 清晰 并 能 适应 未 来 变化 的 代码 ， 编 写 让 你 目 紧 得 都 想 慎 起 来 挂 在 墙 上 
的 代码 。 


我 们 建议 你 阅读 本 书 时 使 用 多 款 浏 览 器 。 


我 们 教 你 编写 符合 标准 的 代码 ， 但 你 依然 可 能 发 现 ， 剖 览 右 在 解释 JavaScript 方 面 存 
在 细微 的 差别 。 我 们 将 竟 尽 所 能 ， 确 保本 书 的 代码 在 所 有 现代 训 览 背 中 都 能 正确 地 运 
行 ， 并 介绍 一 些 确 保 代 码 得 到 所 有 现代 广 览 絮 支持 的 技巧 。 尽 省 如 此 ， 我 们 还 古 建 议 
你 至 少 使 用 两 款 剂 览 强 对 你 编写 的 JavaScript 代 码 进 行 测试 。 这 让 你 能 够 了 解 不 同 剂 览 
代 的 差别 ， 并 创建 在 各 种 训 贤 磺 中 都 能 正确 运行 并 得 到 相同 结 末 的 JavaScript 代 码 。 
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编程 是 件 严 肃 的 事情 ， 你 得 杀 目 动手 ， 有 时 还 得 不 辞 伴 劳 。 


如 果 你 有 一 定 的 编程 经 验 ， 就 能 明白 这 一 操 。 你 寿 刚 读 完 《Head First HTME 与 
CSS》， 会 发 现 编写 代码 有 些 不 同 。 编 程 要 求 你 采用 不 同 的 思维 方式 ， 它 是 一 种 逻辑 
性 很 剖 、 有 时 其 至 非常 抽象 的 工作 ， 要 求 你 从 算法 的 角度 考虑 问题 。 不 过 不 用 担心 ， 
我 们 的 所 有 介绍 都 易于 理解 。 只 要 一 步 一 步 来 ， 并 确保 营养 民 好 、 睡 虐 充 足 ， 就 能 完 
全 区 握 这 些 新 的 编程 概念 。 


活动 都 不 是 可 有 可 无 的 。 

在 本 书 中 ， 练 习 和 话 动 并 非 附 属 品 ， 而 是 核心 内 容 的 组 成 部 分 。 有 些 话 动 和 练习 旨 在 
帮助 记忆 ， 有 些 旨 在 帮助 理解 ， 还 有 一 些 旨 在 帮助 你 应 用 学 到 的 知识 。 千 万 不 要 跳 
过 。 只 有 填 字 游戏 并 非 是 必 做 的 ， 但 它们 能 让 你 的 大 脑 有 机 会 从 不 同 的 角度 思考 这 些 
单词 。 

重复 是 有 意 为 之 ， 而 且 很 重要 。 

Head First 系 列 丛 书 的 独特 之 处 在 于 ， 我 们 想 让 你 完全 理解 学 习 的 内 容 ， 读 完 后 还 能 记 
得 学 到 的 知识 。 参 考 手 册 大 多 不 以 记忆 为 目的 ， 但 本 书 是 一 部 学 习 指 南 ， 因 此 有 些 要 
念 会 反复 介绍 。 

示例 尽 可 能 精简 。 

读者 跟 我 们 说 ， 在 一 个 200 行 的 代码 示例 中 寻找 2 行 需 要 理解 的 代码 真 让 人 郁 则 。 本 书 
的 大 多 数 示例 都 尽 可 能 价 化 了 背景 ， 让 要 学 习 的 代码 人 简单 明了 。 可 别 指望 这 些 示 例 都 
完美 无 缺 ， 因 为 这 些 代 码 是 专 为 学 习 编 写 的 ， 并 非 都 功能 完备 。 

为 方便 读者 下 载 ， 我 们 将 所 有 的 示例 文件 都 放 到 了 网 上 : http://wickedlysmart.com/hfijs。 
“ 考 考 你 的 脑力 ”练习 并 非 都 有 解 。 


有 些 “ 竹 考 你 的 脑力 ”练习 疫 有 正确 的 答案 ， 有 些 是 要 让 你 判断 目 己 的 答案 征 合 正确 
以 及 在 什么 情况 下 是 正确 的 ;， 还 有 些 包 含 提示 ， 则 在 给 你 指明 正确 的 方向 。 
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如 何 使 用 本 书 


我 们 通常 只 列 出 JavaScript 人 代码， 而 不 列 出 HTML 标 记 。 

除 前 两 章 外 ， 我 们 通常 只 列 出 JavaScript 人 代码， 并 假定 你 将 把 它们 租 入 到 正确 的 HTML 
页 面 中 。 对 于 本 书 的 大 部 分 代码 ， 你 都 可 将 其 垦 入 到 下 面 这 个 简单 的 HTML 页 面 中 ; 
要 求 将 代码 磐 入 到 其 他 HTML 页 面 中 时 ， 我 们 会 明确 地 告知 。 


<IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Your HTML Page</title> 


<script> 
人 oo JavaScript 代 码 通 常 放 在 这 里 。 
</script> 
</head> 
<body> 
网 页 内 容 都 放 在 这 里 
</body> 
</html> 


(oe 本 书 开头 会 带 你 完成 所 需 的 所 有 


J 
步 又 。 


获取 代码 示例 、 帮 助 和 讨论 。 
阅读 本 书 所 需 的 一 切 都 可 在 http://wickedlysmart.com/hfjs 找 到 ， 其 中 包含 代码 示例 文件 以 
及 视频 等 补充 材料 。 


F 
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这 些 家 伙 一 点 都 不 含糊 ， 他 们 参与 
了 整个 审阅 过 程 ， 不 放 过 每 个 角落 ， 
提供 了 宝贵 而 详尽 的 反馈 。 









lsmaél Martin ‘Bing” Demiddel 





Frank D. Moore 














Bruce Forkush 





Javier Ruedas 





Alfred J. Speller 


感谢 出 色 的 审阅 团队 


本 书 的 审阅 比 我 们 以 前 编 间 的 任何 图 书 都 详尽 。 事 实 上 ， 有 270 多 人 加 入 了 我 们 的 WickedlySmart 
项 目 ， 实 时 地 对 本 书 进行 审读 和 批评 。 这 样 做 的 效 朱 超 乎 想象 ， 对 改善 本 书 的 各 个 方面 大 有 利 苍 。 
这 里 囊 心 感谢 每 位 审阅 人 员 ， 古 你 们 极 大 地 提高 了 本 书 的 品质 。 

上 述 技 术 审 校 都 非常 出 色 ， 他 们 还 提供 了 其 他 的 反馈 ， 为 本 书 作 出 了 巨大 的 贡献 。 下 面 的 审阅 人 
员 也 为 本 书 的 各 个 方面 作出 了 贡献 : Galina N. Orlova、 J. Patrick Kelley、Claus-Peter Kahl、Rob 
Cleary、Rebeca Dunn-Krahn、 Olaf Schoenrich、 Jim Cupec、Matthew M. Hanrahan、 Russell 








Alleen-Willems、 Christine J. Wilson、 Louis-Philippe Breton、 Timo Glaser、 Charmaine Gray、Lee 
Beckham、 Michael Murphy、 Dave Young、 Don Smallidge、 Alan Rusyak、 Eric R. Liscinsky、 Brent 
Fazekas、 Sue Starr、 Eric (Orange Pants) Johnson、 Jesse Palmer、 Manabu Kawakam1、 Alan 
Mclvor、 Alex Kelley、 Yvonne Bichsel Truhon、 Austin Throop、 Tim Willams、J. Albert Bowden 
I[、 Rod Shelton、Nancy DeHaven Hall、 Sue McGee、 Francisco Debs、 Miriam Berkland、 Christine 
H Grecco、 Elhadji Barry、Athanasios Valsamakis、Peter Casey、 Dustin Wollam 和 Robb Kerley。 


你 现在 的 位 置 ”XXXxv 


审 校 团 队 


致 殴 ” 

全 受 人 葡 敬 的 技术 审 校 
非常 感谢 受 人 尊敬 的 技术 审 校 DavidPowers。 事 实 上 ， 我 们 编著 图 书 再 ee 
也 离 不 开 David 了 ， 他 救 了 我 们 无 数 次 。David 之 于 我 们 ， 犹 如 擅长 作词 
的 Bernie 之 于 作曲 家 Elton， 这 让 我 们 禁不住 扣 心 自 间 ， 没 有 他 我 们 还 
能 编著 图 书 吗 ? David 帮 助 敦 促 我 们 将 本 书写 得 更 出 色 、 技 术 上 更 准确 ， 
他 的 第 二 职业 是 脱口 秀 演员 ， 在 我 们 改进 本 书 较为 幽默 的 部 分 时 帮 了 大 
忙 。 再 次 感谢 David 一 一 你 如 此 专业 ， 知 道 通 过 了 你 的 技术 审核 后 ， 我 
们 连 睡觉 都 更 安稳 了 。 








O'Reilly 的 编辑 


还 要 万 分 感谢 编辑 Meghan 
Blanchette 为 本 书 的 出 版 请。 可 别 被 他 的 笑容 蒙骗 了 ， 这 可 
平 道路 并 扫除 所 有 有 的 障碍 ， 是 个 吹 毛 求 疲 的 家 伙 (当然 是 
感谢 她 耐心 地 等 待 并 牺牲 就 技术 上 而 言 ) 。 

与 家 人 团聚 的 时 光 。 她 还 

让 我 们 在 和 O’Reilly 处 理 彼此 关系 

时 保持 理智 。 我 们 太 喜 欢 你 了 ， 人 迫不及待 再 次 与 你 合作 | 

















Meghan Blanchette 


特别 感谢 荣誉 主编 Mike Hendrickson 提 议 编 写本 书 。 再 次 感谢 
Mike ， 如 采 疫 有 你 ， 我 们 一 本 书 都 出 版 不 了 。 十 多 年 来 ， 你 一 
直 是 我 们 的 头号 功臣 ， 真 是 太 爱 你 了 1 


* 之 所 以 在 致谢 部 分 提 到 这 么 多 人 ， 是 因为 我 们 想 验 证 一 个 理论 : 
书 中 致谢 提 到 的 每 一 个 人 都 至 少 会 买 一 本 书 ， 他 们 的 亲 威 朋友 也 
可 能 会 购买 。 如 果 你 想 让 自己 的 名 字 出 现在 我 们 下 本 书 的 致谢 部 
分 ， 而 且 有 一 个 大 家 族 ， 请 联系 我 们 。 





Mike Hendrickson 





O'Reilly 团 队 
还 要 训 心 感谢 O’Reilly 团 队 。 感 谢 Melanie Yarbroush、Bob Pfahler 和 Dan Fauxsmith 群 策 群 
力 ， 让 本 书 得 以 付 样 ; 感谢 Ed Stephenson、Husguette Barriere 和 Leslie Crandell 在 营销 工作 上 


号 先 士 众 ， 我 们 很 喜欢 他 们 的 创造 性 党 销 方式 ;感谢 Elli Volkhausen、Randy Comer 和 和 Karen 
Montgomery 充 满 灵感 的 封面 设计 ， 一 如 既往 地 让 我 们 非常 满意 ， 感 谢 Rachel Monaghan 所 做 的 
文字 加 工 工 作 ， 既 一 丝 不 荀 ， 又 保留 了 幽默 的 风格 ;感谢 Bert Bates 提 供 宝 喘 的 反馈 。 
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JavaScript 速 览 


、 巡 入 JavaScript 鹏 世 曙 













水 里 可 盆 服 了 了， 赶快 下 来 吧 ! 
我 们 就 要 出 发 去 研究 JavaScript， 
编写 着 运行 一 些 人 代码， 看 硕 它们 如 
何 与 浏览 器 交 豆 ! 不 久 后 你 就 能 动 
手 编写 代码 了 。 


JavaScript 赋 予 你 强大 的 力量 。JavaScript 是 一 款 纯正 的 Web 编 程 语言 ， 让 
你 能 够 给 网 页 添加 行为 。 有 了 JavaScript， 你 就 能 够 与 用 户 互动 ， 啊 应 有 趣 的 事 
件 ， 从 网 上 收集 数据 并 将 其 用 于 网 页 中 ， 在 网 页 中 绘制 图 形 等 。 网 页 不 再 是 枯 
燥 、 乏 味 、 静 态 的 一 一 只 是 一 动不动 地 躺 在 那里 。 和 掌握 JavaScript 后 ， 你 还 能 够 
赋予 网 页 全 新 的 行为 。 


你 也 不 会 只 是 一 个 人 在 战斗 。JavaScript 是 最 流行 的 编程 语言 之 一 ， 所 有 现代 训 
览 右 《和 大 多 数 古 老 的 阅览 右 ) 都 支持 它 ， 其 外 治 在 不 断 延伸 ， 正 逐 产 被 内 入 
除 训 览 右 外 的 其 他 众多 环境 中 。 话 不 多 讲 ， 明 们 现在 就 动手 吧 ! 








JavaScript 的 工作 原理 


JavasScript 的 工作 原理 


如 果 你 习惯 于 在 网 页 中 添加 结构 、 内 容 、 布 局 和 样式 ， 现 在 也 该 添加 一 些 
行为 了 ! 这 年 头 ， 只 古 前 前 地 身 在 那里 的 网 页 已 经 没有 市 场 。 要 给 人 留 下 
次 刻 的 印象 ， 网 页 必须 是 动态 、 交 互 性 的 ， 并 以 新 颖 的 方式 与 用 户 互 动 ; 
这 正 是 JavaScript 的 用 武之 地 。 下 面 先 来 看 看 JavaScript 在 网 页 生态 系统 中 


所 处 的 位 置 。 






HTM 
~ 


你 已 经 知道 ， 我 们 使 用 HTML 
(Hypertext Markup Language, 
超 文 本 标记 语言 ) 来 指定 网 页 
的 内 容 和 结构 (如 上 段 深 、 标 题 
和 区 块 ) 。 
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你 还 知道 ， 我 们 使 用 CSS (Cascading 
Style Sheets， 层 盖 样 式 表 ) 来 指定 
网 页 的 外 观 : 颜色 、 字 体 、 边 框 、 边 
浏览 时 距 和 网 页 的 布局 。CSS 用 于 指定 样 
式 ， 这 是 以 独立 于 网 页 结构 的 方式 实 
现 的 。 


JavasScript 是 HTML 和 CSS 负责 计算 的 兄弟 ， 下 面 简要 地 
介绍 一 下 它 。JavaScript 让 你 能 够 在 网 页 中 添加 行为 。 
要 在 用 户 单 击 On Sale for the next 30 seconds! 按 钮 时 
做 出 响应 吗 ?” 要 即时 地 检查 用 户 的 表单 输入 吗 ?” 要 从 
Twitter 提取 并 显示 消息 吗 ? 要 在 网 页 中 运行 游戏 吗 ? 
求助 于 JavaScript 吧 。JavaScript 让 你 能 够 在 网 页 中 进行 
编程 ， 从 而 实现 计算 、 响 应 、 绘 男 、 通 信 、 提 醒 、 变 
更 、 更 新 、 修 改 等 动态 功能 。 这 些 都 是 JavasScript 的 用 
武之 地 。 


如 何 编写 JavaQcript 


JavaScript 在 编程 领域 独 树 一 帆 。 使 用 典型 的 编程 语言 时 ， 你 必须 先 
编写 代码 ， 再 编译 、 链 接 和 部 署 。JavaScript 则 灵活 多 变 得 多 。 使 用 
JavaScript 时 ， 你 只 需 直 接 在 网 页 中 编写 代码 ， 再 在 训 览 谷中 加 载 网 
页 ， 浏 览 絮 束 会 恰 快 地 执行 你 编写 的 代码 。 下 面 更 深入 地 探索 其 中 
的 工作 原理 。 





<html> 
<head> 


<title>Icecream</title> 


Icecream Flavors</h1> 
<h2><em>49 flavors</em></h2> 
11 your favorite 











编写 加 载 


你 像 往 常 那样 创建 网 页 :使 
用 HTML 指 定 内 容 ， 使 用 CSS 
指定 样式 ， 同 时 在 网 页 中 添 
加 JavaScript 人 代码。 稍 后 你 
将 看 到 ， 与 CSS 一 样 ， 可 将 
JavaScript 放 在 网 页 中 ， 也 
可 将 其 放 在 独立 的 文件 中 ， 
并 在 网 页 中 包含 该 文件 。 


Hky 


人 和 会、 


0 
(0 


现在 请 将 其 暂时 抛 在 脑 后 


与 往常 一 样 ， 在 浏览 器 中 输 
入 网 页 的 地 址 。 浏 览 器 过 到 
JavaScript 代 码 后 ， 将 立即 
对 其 进行 分 析 ， 为 执行 做 好 
准备 。 与 HTML 和 (CSS 一 样 ， 
发 现 JavaScript 代 码 存在 错 
误 时 ， 浏 筑 器 会 尽力 继续 读 
取 后 面 的 JavaScript、HTML 
和 CSS， 尺 可 能 避免 无 法 问 
用 户 显 示 网 页 的 情况 发 生 。 


人 条 后 将 讨论 时 有 攻 浏览 器 还 会 创建 HTML 页 面 的 对 象 模型 可 供 ” 人 > 2 
JavaScript 使 用 。 这 将 在 后 面 更 详细 地 介绍 [Ca pe 


JavaScript 速 


JS 





在 网 页 中 遇 到 JavaScript 代 
码 后 ， 浏 览 嚣 立即 执行 它 
们 ， 并 在 网 页 的 整个 生命 周 
期 内 不 断 地 执行 。 不 同 于 早 
期 的 JavaScript 版 本 ， 当 今 
的 JavaScript 使 用 了 高 级 编 
译 技 术 ， 其 动力 强劲 ， 执 行 
代码 的 速度 几乎 能 够 与 原生 


编程 语言 媲 





























HA 
Uw 
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如 何 将 JavaScript 代 码 加 入 网 页 


如 何 将 JavaSeript 代 码 加 入 网 页 


重要 的 事情 先 说 。 如 采 不 知道 如 何 将 JavaScript 代 码 加 入 网 页 ， 你 在 
JavaScript 的 道路 上 束 走 不 了 多 远 。 如 何 加 入 呢 ? 当然 是 使 用 <script> 
元 素 | 


下 面 来 看 一 个 枯燥 而 平凡 的 网 页 ， 并 使 用 <script> 元 素 添 加 一 些 动态 
行为 。 请 不 要 过 度 关 注 我 们 将 诡 加 的 <script> 元 素 的 细节 ， 你 当前 的 


一 … 


目标 是 运行 一 些 JavaScript 代 码 。 





这 是 标准 的 HTML5 doctype 
以 及 <html> 和 和 <head> 元 素 。 


<Iadootype html> 这 个 页 面 的 <body> 元 素 也 相当 普通 。 
<html lang="en"> 


<head> 
<meta charset="utf-8"> 在 这 个 网 页 的 <head> 元 素 中 ， 
让 JOSE GS Ceneric ge/ 我 们 添加 了 一 个 <script> 元 素 。 
<script> 


setTimeout(wakeUpUser, 5000); 
function wakeUpUser() { 


alert("Are You going to stare at this boring Page forever?"); 


} 代 在 <script> 元 素 中 ， 我 们 编 SS 
</script> 号 了 一 些 JavaScript 代 码 。 | .7 ee 
再 说 一 遍 ， 不 要 过 度 关注 这 些 代 码 的 功能 。 
“a> 但 我 敢 打赌 ， 你 肯定 会 浏览 这 些 代码 ， 并 
<body> 青 测 各 个 部 分 的 功能 。 


<hl>Just a generic heading</n1> 


<p>Not a lot to read about here. I'm Just an obligatory paragraph living in 
an example in a JavaScript book. I'm looking for something to make my life more 
exciting.</p> 


</body> 
A 





六 local /~ haptor /ber 
和 J host/ Beth/HFJS/chapter1 /behavio 二 
se = : ps 





aaac ?Ii» 久 
Justa generic heading 


se 
Not a Iot to 
Tead about here 1 . 
an example in aJ ere. I'm just an obligat 
life more ex JavaScript book. I'm Jooki St0Y Paragraph living i 
cilting. Ooking for somethi 8 In 
ng to make m 
y 





将 这 个 网 页 的 内 容 输 入 到 一 个 名 为 behavior.html 的 文件 中 ， 将 其 拖 | 

放 到 浏览 器 中 (或 选择 菜单 “文件 ”>“ 打 开 ”) ， 以 加 载 它 。 其 © rr 

中 的 JavaScript 代 码 有 何 功能 呢 ? 你 需要 等 待 5 秒 钟 才能 知道 。 i 
Eee 
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JavaScript 速 览 


一 定 要 放松 心情 。 我 们 并 不 要 求 你 现在 就 对 JavaScript 了 如 指 掌 。 事 实 上 ， 我 们 只 想 让 你 
感受 一 下 JavaScript 是 什么 样 的 。 


话 虽 如 此 ， 你 也 不 能 完全 管 身 事 外 ， 因 为 我 们 想 让 你 热 热 里 ， 让 大 脑 活 跃 起 来 。 还 想 着 
前 一 页 的 代码 ?下 面 就 来 猜 猜 它们 是 做 什么 的 : 


rr 一 可 能 是 一 种 数 5 秒 的 方式 ” 提示: 1000 毫 秒 =1 黎 。 
创建 可 重用 /noo Nenapoooor 5000); 


的 代码 并 将 这 文 一 function wakeUpUser() { 








些 代 码 命 0 alert ("Are you going to stare at this boring Page forever?"); 


wakeUpUser? } 
\ 显然 是 一 种 使 用 消息 提醒 用 户 乓 方式 ， 


局 将 


y 

[9): 我 听 说 JavaScript 是 一 款 无 用 的 语言 ， 是 这 样 的 吗 ? 站 ee OSD 至 少 他 

A ， 这 样 说 的 。 能 吗 ? 

只 ， 刚 面世 时 ，JavaScript 的 动力 肯定 谈 不 上 有 多 强 。 jon 

但 随后 其 对 Web 来 说 变 得 日 益 重 要 ， 因 此 很 多 人 ( 包 哈 ， 之 完 。 作 为 一 种 通用 的 脚本 语言 ，JavaScript 的 
行业 中 一 些 最 优秀 的 人 才 ) 都 为 改善 JavaScript 的 性 能 使 用 ea 览 器， 还 用 于 从 图 形 工 具 到 音乐 应 

了 和 努力。 不 过 你 可 能 不 知道 ， 即 便 是 在 速度 变 得 超 快 ”用 程序 的 众多 应 用 程序 中 ， 甚至 用 于 服务 器 ; 冯 编 程 。 通 过 

前 ，JavaScript 也 是 一 款 非 常 本 出 的 语言 。 你 将 看 到 ， 我 们 “学习 JavaScript， 你 的 付出 在 未 来 很 可 能 在 除 网 页 外 的 其 他 


会 使 用 它 来 实现 一 些 非常 强大 的 功能 领域 得 到 回报 。 
器; JavaScript 与 Java 有 关系 吗 ? [9 ; 你 说 很 多 其 他 语言 都 是 编译 型 的 。 这 到 底 是 什么 意 


思 呢 ? 为 何 JavaScript 不 是 编译 型 的 ? 
谷 : 除名 TOME 系 。JavaScript 推 出 时 ，Java 已 经 是 jp 
炙手可热 的 流行 语言 ， 为 搭 上 Java 这 辆 顺风 车 ，JavaScript 合 ， 使 用 C、C++ 或 Java 等 传统 编程 语言 时 ， 执 行 代码 前 
的 发 明 者 在 其 名 称 中 包含 了 Java。 这 两 种 语言 都 借鉴 了 C 等 ”必须 进行 编译 。 编 译 是 将 代码 转换 为 适合 计算 机 的 表示 方 
编程 语言 的 一 些 语 法 ， 但 除 此 之 外 ， 它 们 有 天 壤 之 别 。 | 通常 可 改善 运行 阶段 性 能 。 脚 本 语言 通常 是 解释 型 的 ， 
| 3): 意味 着 浏览 器 执行 它 遇 到 的 每 行 ] avaScript 代 码 。 脚 本 语 

。 使 用 JavaScript 是 创建 动态 网 页 的 最 佳 方式 吗 ? 诸 言 ee 么 看 重 运 行 阶段 性 能 ， 而 更 强调 灵活 性 ， 因 此 更 过 

如 Flash 等 解决 方案 怎么 样 ” 合用 于 完成 原型 开发 和 交互 式 编码 等 任务 。JavaScript 最 初 
AL ， 是 解释 型 的 ， 因 此 多 年 来 其 性 能 始终 不 那么 高 。 然 而 ， 还 
只 ” Flash 一 度 是 很 多 人 开发 交互 式 网 页 和 动态 网 页 的 首 有 一 条 中 间 路 线 ， 即 可 对 解释 型 语言 进行 即时 编译 ， 这 正 
选 ， 但 行业 的 发 展 天 平 正 日 益 倾 向 于 HTML5 和 JavaScript。 是 浏览 器 厂商 对 现代 JavaScript 采 取 的 做 法 。 事 实 上 ， 现 在 
HTML5 推 出 后 ，JavaScript 已 成 为 标准 的 Web 脚 本 语言 。 人 很 ”使 用 JavaScript 既 可 获得 脚本 语言 的 便利 性 ， 又 可 享受 编译 
av 改善 JavaScript 的 性 能 和 效率 ， 以 及 开发 扩展 “型 语言 的 性 能 。 顺 便 说 一 向， 本 书 将 使 用 术语 解释 、 评 估 
浏览 器 功能 的 JavaScript API。 和 执行 ， 在 不 同 的 上 下 文中 ， 它 们 的 含义 存在 细微 的 差别 ， 

但 在 本 书 中 ， 它 们 基本 上 是 一 回 事 。 





JavaScript 历 史 


Javaoceript， 你 进步 不 小 


可 





JavaScript 1 .0 





Netscape 是 第 一 家 真正 意义 上 的 训 
贤 姓 公司 ， 它 面世 时 你 可 能 还 没有 
出 生 。20 世 纪 90 年 代 中 期 ， 神 贤 如 
领域 的 苋 争 异 第 惨 列 ， 与 微软 的 苋 
争 尤 其 如 此 ， 因 此 给 浏览 如 添 加 激 
动人 心 的 新 功能 成 了 重 中 之 重 。 


为 此 ，Netscape 想 推出 一 款 脚本 话 
言 ， 让 任何 人 都 能 够 在 网 页 中 添 
加 脚本 。LiveScript 应 运 而 生 ， 这 
征 一 秋 为 迅速 请 足 上 述 需 求 而 
开发 的 语言 。 你 可 能 从 未 听 说 过 
LiveScript， 这 是 因为 当时 Sun 公 
司 推出 了 Java， 其 股票 的 价格 一 
飞 冲 天 。 为 搭 上 Java 成 功 的 顺风 
车 ，Netscape 将 LiveScript 改 名 为 
JavaScript。 虽 然 JavaScript 和 Java 
一 点 关 系 都 没有 ， 可 谁 在 乎 呢 ? 


微软 有 什么 反应 呢 ? 它 紧 跟着 
Netscape 推 出 了 自己 的 脚本 语言 
JScript， 这 种 语言 与 JavaScript 很 
像 。 广 贤 絮 之 战 就 此 爆发 。 
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从 1996 年 到 2000 年 ，JavaScript 未 
潮 成 熟 起 来 了 。 实 际 上 ，Netscape 
提交 了 对 JavaScript 进 行 标准 化 的 
申请 ，ECMAScript 由 此 诞生 。 从 
未 听 说 过 ECMAScript? 没关系 ， 
你 现在 昕 说 过 了 ; 你 只 需 知道 它 
是 所 有 JavaScript 实 现 (无 论 是 浏 
贤 絮 还 是 其 他 环境 中 ) 的 标准 语言 
在 此 期 间 ， 受 剂 贤 絮 之 战 的 影响 ， 
开发 人 员 使 用 JavaScript 时 依然 举 
步 维 艰 ， 因 为 不 同 浏 览 絮 之 间 存 在 
众多 的 差别 ， 但 几乎 在 所 有 情况 
下 ，JavaScript 都 成 了 不 二 的 选择 。 
与 此 同时 ，JavaScript 和 JScript 之 
间 虽 然 存 在 细微 的 差别 ， 让 开发 人 
员 头 痛 不 已 ， 但 随 着 时 间 的 推移 ， 
这 两 种 语言 变 得 越 来 越 像 。 

彼 时 JavaScript 还 未 摆脱 业余 语言 
的 名 声 ， 但 情况 很 快 束 会 发 生变 
fe 





JavaScript 1 .8.5 


JavaScript 终 于 成 熟 起 来 ， 歼 得 了 专 
业 开发 人 员 们 的 尊敬 ! 你 可 能 会 说 ， 
这 都 是 拜 强大 的 标准 (比如 当前 所 
有 现代 浏览 絮 都 苯 循 的 ECMAScript 
5) 所 赐 ， 但 实际 上 JavaScript 得 
以 用 于 专业 领域 ， 都 是 Google 推 
动 的 结果 。2005 年 ，Google 发 布 
了 Google Maps， 问 全 世界 展示 了 
JavaScript 在 创建 动态 网 页 方面 的 
强大 威力 。 

随 着 JavaScript 再 次 成 为 天 注 的 焦 
点 ， 很 多 杰出 的 编程 语言 人 员 致 力 
于 改善 JavaScript 解 释 如 ， 极 大 地 
改善 了 其 运行 阶段 性 能 。 与 面世 
之 切 相 比 ， 现 今 的 JavaScript 变 化 
不 大 ; 它 急匆匆 地 来 到 这 个 世界 ， 
却 是 一 款 功 能 和 表现 力 强 大 的 语 


oO 
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你 看 看 ， 编 写 
JavaScript 多 容易 


var price = 28.99; 
var discount = 10; 


var total = 
price - (price * (discount / 100)); 


if (total > 25) { 


freeShipping(); 


Var count = 10; 
While (count > 0) { 
juggle(); 


count = count - 1; 


var dog = {name: "Rover", weight: 35}; 
If (dog.weight > 30) { 

alert("WOOF WOOF"); 
} else { 


alert("woof woof"); 


Var circleRadius = 20; 
Var circleArea = 


Math.PI * (circleRadius * circleRadius); 


ey 


JavaScript 速 览 


_ 上 隆 
你 虽然 还 不 熟悉 JavaScript， 但 肯定 能 够 对 一 些 JavaScript 代 
码 的 作用 猜 个 八 九 不 离 十 。 请 看 下 面 的 每 行 代码 ， 你 能 猜 出 


它们 的 作用 吗 ? 请 在 下 面 写 出 你 的 答案 。 我 们 指出 了 第 一 行 
代码 的 功能 。 如 果 你 猜 不 出 来 ， 请 参阅 下 一 页 的 答案 。 








创建 一 个 名 为 price 的 变量 ， 并 将 28.99 赋 给 它 
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JavaScript 练 习 答 案 


你 看 看 ， 编 写 
JavaScript 多 容易 


var price = 28.99; 
var discount = 10; 


var total = 
price - (price * (discount / 100)); 


if (total > 25) { 


freeShipping(); 


Var count = 10; 
while (count > 0) { 
juggle(); 


count = count - 1; 


Var dog = {name: "Rover", weight: 35}; 


If (dog.weight > 30) { 
alert("WOOF WOOF"); 
} else { 


alert("woof woof"); 


Var circleRadius = 20; 
Var circleArea = 


Math.PI * (circleRadius * circleRadius); 





你 虽然 还 不 熟悉 JavaScript， 但 些 
JavaScript 代 码 的 作用 猜 个 八 九 不 离 十 。 请 看 下 面 的 每 行 
代码 ， 你 能 猜 出 它们 的 作用 吗 ? 请 在 下 面 写 出 你 的 答案 。 


创建 一 个 名 为 price 的 变量 ， 并 将 28.99 赋 给 它 
创建 一 个 名 为 discount 的 变量 ， 并 将 10 赋 给 它 
根据 折扣 计算 新 的 价格 ， 并 将 其 赋 给 变量 total 
将 变量 total 的 值 与 25 进 行 比较 。 如 果 它 大 于 25， 
就 使 用 freeShipping 执 行 相应 的 操作 

i 语句 到 此 结束 


就 变 变 戏法 ， 
并 将 count 的 值 减 1 
while 循 环 到 此 结束 


就 在 网 页 
if/else 语 句 到 此 结束 


显示 woof woof 


创建 一 个 名 为 circleRadius 的 变量 ， 并 将 20 赋 给 它 
创建 一 个 名 为 circleArea 的 变量 ， 
并 将 这 个 表达 式 的 结果 (1256.6370614359173) 赋 给 





如 果 不 想 只 是 创建 一 些 静 
态 的 网 页 ， 就 必须 使 用 
JavaScript, 





确实 如 此 。 
使 用 HTML 和 CSS， 可 创建 一 些 漂亮 的 网 页 ， 但 熟悉 JavaScript 后 ， 就 可 以 创 
建 其 他 类 型 的 网 页 了 。 实 际 上 ， 你 甚至 可 以 将 网 页 视 为 应 用 程序 (甚至 是 一 





种 体验 ) ， 而 不 仅仅 古 网 页 。 


你 可 能 会 说 : “我 知道 ， 确 实 如 此 。 不 然 我 为 什么 会 阅读 这 本 书 呢 ?” 实 际 
上 ， 我 们 是 想 借 此 机 会 谈 谈 如 何 学 习 JavaScript。 如 果 你 使 用 过 编程 语言 或 脚 
本 语言 ， 肯 定 大 致知 道 即 将 面临 的 困难 。 如 果 你 以 前 主要 使 用 的 是 HTML 和 
CSS， 就 必须 明日 编程 语言 的 一 些 截然 不 同 之 处 。 


使 用 HITML 和 CSS 时 ， 你 做 的 主要 工作 都 是 声明 型 的 ， 例 如 指出 一 些 文本 为 
段落 ， 或 指出 属于 sale 类 的 元 素 都 为 红色 。 使 用 JavaScript 时 ， 则 要 给 网 页 
添加 行为 ， 为 此 需要 对 计算 进行 描述 。 你 需要 知道 如 何 描述 类 似 于 下 面 的 事 
情 : 对 所 有 的 正确 答案 求 和 ， 以 计算 用 户 的 得 分 ， 用 户 单 击 按钮 时 ， 播 放 表 
示 获 胜 的 声音 ， 取 回 我 最 近 发 布 的 消息 ， 并 将 其 放 到 这 个 网 页 中 。 


为 此 ， 需 要 使 用 与 HTML 和 和 CSS 截然 不 同 的 语言 。 下 面 束 来 看 看 如 何 使 用 这 
种 语言 。 
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这 通常 还 
获得 更 高 区 


薪水 | 








和 GE 
月 E 


HA 
Uw 


JavaScript 语 名 


如 何 编写 语 多 


创建 HTML 时 ， 你 通常 对 文本 进行 标记 ， 以 指定 其 结构 。 为 此 ， 要 给 文本 添 
加 元 素 、 特 性 和 值 。 





kr 党 人 耻 使 用 HTML 对 文本 进行 标记 以 
<hl class="drink">Mocha Caffe Latte</h1L> 5 和 下 失 结构 。 例如 ， 我 画 亚 。 


Mocha Caffe L 二 
<P>Espresso，steamed milk and chocolate syrup, 饮料 的 标 atte 的 大 标题 ， 


just the way you like it.</p> 


po © 
尼 直 一 下 
题 。 接 下 来 ， 并 需要 一 个 辐 汉 


CSS 稍 微 有 点 不 同 。 使 用 CSS 时 ， 你 编写 一 系列 规则 ， 其 中 每 条 规则 都 指定 


了 网 页 中 的 元 素 及 其 样式 。 
使 用 C55 时 ， 我 们 编写 规则 ， 这 些 规则 


使 用 选择 器 (如 h1.drink 和 P) 指定 


Color: brown; 一 将 所 有 饮料 的 标题 都 显示 为 棕色 。 
} 
P { 
font-family: sans-serif;  — 所 有 段落 都 使 用 sans-serif 字 体 。 





使 用 JavaScript 时 ， 你 编写 语句 。 每 条 语句 都 指定 了 计算 的 一 小 部 分 ， 而 所 有 
语句 一 起 给 网 页 添加 行为 。 


:五 
LL. 系列 语句 。 每 条 语句 都 做 一 点 点 工作 ， 
天 一 如 声明 用 于 存储 值 的 变量 。 
var age = 25; Li 一 这 里 创建 了 两 个 芝 重 ， 它们 分 


var name = "Owen".; 别 包 含 年 龄 25 和 值 Owen。 


if (age > 14) { 有 些 语句 作 决 策 ， 如 用 户 的 年 龄 是 否 大 于 14。 


alert("Sorry this Page is for kids only!'"); 

1 三 一 如 采 是 ， 就 提醒 用 户 ， 
} else { 指出 他 太 大 了 ， 该 网 页 

alert("Welcome " + name + "1!"); 对 他 来 说 不 合适 。 


否则 ， 就 欢迎 用 户 ， 如 显示 Welcome 
Owenl。( 但 在 这 里 Owen 的 年 龄 为 25， 
因此 不 会 这 样 显示 。 ) 


JavaScript 速 


变量 和 全 


你 可 能 往 意 到 了 ，JavaScript 语 句 通 种 包含 变量 。 变 量 用 于 存储 值 。 
什么 样 的 值 呢 ? 下 面 是 一 些 示例 。 





这 条 语句 声明 一 人 他 六 We 
. < 的 变 重 ， 并 将 数字 值 2 赋 给 RS 
Var winners = 2;，; 
| 
这 条 语句 将 一 串 字符 (简称 bE 
AP 太太 —— 
var name = "Duke"; 为 字符 串 ) 赋 给 变量 name。 Ro name 
| 
\ i 
var isEligible = false; 这 条 语句 将 值 false 由 isFligiple 


给 变量 isEligible。ture/ 请 注意 ,市 涉 值 
false 被 称 为 布尔 值 。 f_ 一 无需 用 引号 括 起 。 


除数 字 、 字 符 品 和 布尔 值 外 ， 变 量 还 可 存储 共 类 型 的 值 ， 这 将 在 
稍 后 介绍 ， 但 不 管 存储 的 是 哪 种 类 型 的 值 ，z a 
司 。 下 面 更 深入 地 介绍 如 何 声明 变量 ， 


_ 任何 情况 下 都 应 这 样 
声明 变量 时 ， 做 ， 尽 管 省 略 关 键 字 
总 是 以 关键 字 var， JavaScript 也 不 接 下 来 ， 给 变量 指 


var 打 关 。 会 报错 。 后 面 将 解释 pa Se 
SN 关中 二 碑 @ 一 


. ~ 
var winners = 2; 赋值 语句 总 是 以 分 号 结束 。 


™ 


在 声明 变量 时 ， 也 可 给 它 赋值 ， 方 
法 是 在 变量 名 后 面 加 上 等 号 和 值 。 






没有 值 ? ! 我 还 有 什 
么 用 ? ! 大 侮 奉 人 了。 


这 里 说 “也 可 ”是 因为 创建 变量 时 ， 可 以 不 给 它 指定 初 始 值 ， 而 在 以 
后 绸 给 它 赋 值 。 要 在 创建 变量 时 不 指定 初始 值 ， 只 需 省 略 赋值 部 分 即 









9]， 如 下 所 示 。 O 
9 
省 略 等 号 和 值 时 ， 只 是 
人 “声明 了 一 个 可 供 以 后 使 | 
var losers; 用 的 变量 。 和 
En 


你 现在 的 位 置 ， 


HA 
Uw 
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JavaScript 天 键 字 


奶 匆 随意 命名 








你 知道 变量 有 名 字 ， 你 也 知道 
你 还 知道 ， 变 量 可 存储 数字 、 
但 如 何 


循 下 面 两 条 规则 ， 


变量 有 值 。 
字符 串 和 布尔 值 等 。 


给 变量 命名 呢 ? 随便 命名 都 行 吗 ? 不 是 这 样 的 ， 但 变量 命名 规则 非常 
指定 的 杰 量 名 融 征 合法 的 。 





@@ 以 字母 、 下 划 线 或 美元 符号 打头 。 


然后 使 用 任意 数量 的 字母 、 数 字 、 下 划 线 或 美元 符号 ， 


简单 :只 要 遵 


哦 ， 还 有 一 点 : 不 能 使 用 任何 内 置 关 键 字 ， A function、false 等 ， 以 免 计 JavaScript 








感到 迷惑 。 因 此 ， ne 务必 远离 
面 将 使 用 其 中 的 一 些 ， 并 指出 它们 的 含义 
break delete for ]et super 
Case do Function New Switeh 
catoh else 1 在 package El 
class enum implements private tneow 
Const export TOT protected true 
continue extends Li Publie ry 
debugger false instanceof return typeof 
default finally interface Sam var 
世上 没有 

则 项 的 亲 症 
> > 
上 9】 ， 何 为 关键 字 ， 上 9】 ;如果 将 关键 字 用 作 变 量 名 的 
Au ， 一 部 分 呢 ? 例如 ， 可 将 变量 命名 为 
只 ， 关 键 字 是 JavaScript 保 留 字 ， ifonly ( 即 在 变量 名 中 包含 关键 字 


JavaScript 将 其 用 于 特殊 目的 。 如 果 将 
关键 字 用 作 变 量 名 ， 将 让 你 和 浏览 器 
都 感到 迷惑 。 


串 1 量 


if) 吗 ? 

AAA ， 

从 ， 当然 可 以 ， 只 要 变量 名 不 与 关 
键 字 完 全 相同 就 行 。 另外， 编写 代码 
时 应 确保 其 清晰 ， 因 此 通常 不 要 使 用 
变量 名 elze， 因 为 它 容易 与 el1se 混 


消 。 


这 些 禁 区 。 下 面 列 出 了 JavaScript 关 键 字 ， 本 书后 





>» 
[5) s JavaScript 区 分 大 小 写 吗 ? 换 
颁 话 说 ,，myvariable 和 和 MyVariable 
指 的 是 一 回 事 吗 ? 


AAA ， 

只 ”如果 你 习惯 了 HTML 标 记 ， 可 
能 习惯 于 不 区 分 大 小 写 ， 因 为 在 浏览 
器 看 来 ，<headq> 和 <HEAD> 是 一 回 事 。 
然而 ， 在 JavaScript 中 ， 变 量 名 、 关 键 
字 和 了 允 数 名 等 几乎 所 有 一 切 的 大 小 写 
都 很 重要 ， 因 此 请 务必 注意 大 小 写 


HA 


JavaScript 速 览 





如 何 避免 令 人 难堪 的 命名 错 识 


在 给 变量 命名 方面 ， 你 有 极 大 的 ; 
革命 名 方面 ， 你 有 极 大 的 选择 用 于 由 多 个 单词 组 成 的 变量 名 时 ， 采 。 除 间 
中 采 ”除非 有 充分 的 











空间 ， 下 面 是 一 些 来 自 Web 镇 各/ 八 担 | 
未 可 入 从 全 的 小 失 。 用 耻 式 拉 和 以 王爷 的 理由 ， 否 则 不 要 合用。 
选择 有 意义 的 名 称 。 有 团 异 ,你 梧 外 需 守 一 个 坟 是 站 ] 
ZA s ’ 二 ， 、 i 2 EL 、 Bs a 
不 类 似 于 喷 火 的 双 头 龙 (a avant fe 
a 种 约 


变量 名 Im S 下 x i 
| 十 你 来 说 也 1 headed dra : , Se 
Es en So re a 
人 待 见 - 肚 敌 时 和 号 中 通常 不 和 呈 ; 如何 给 这 样 的 变量 命名 吧 ? 采 人 全 变量 名 。 然 而 ， 我 
已 记 这 些 变 量 的 含义 人 | 体 电 这 起， 除非 有 充分 的 理由 (县 
量 使 用 变量 的 首 守 大 天 写作 和 是 什么 理由 你 自己 各 及 
nT twoH i : ， 要 使 用 这 玉昌 M6) ， 合 则 不 
LE pa Be 总 ee 骆 这 网 种 变量 名 ， 
ia 镇 节 拉 写法 使 用 起 来 很 简单 ， 在 Web 小 心 驶 得 万 年 般 
活 峰 创建 的 中 是 它 提 供 了 足够 的 录 给 变量 命名 时 ， 安 全 钉 _。 
具体 。 还 有 其 他 命名 i 还 将 介绍 一 些 安全 小 贴 十 。 el 
Te 
9 在 其 他 语言 中 亦 是 如 此 ， 使 用 关键 字 ， 吉 ee 一 正 归 避免 










"YOU rule!" 
'And so do Youl' 


单行 注释 以 两 个 料 杆 打头 。 注 释 只 是 用 于 em 不 要 用 引号 括 起 布尔 值 true 和 false。 


国 
向 你 或 其 他 开发 人 员 解 释 代码 ， 它 们 不 会 rockin = true; 
执行 。 a ”声明 变量 时 ， 可 以 不 给 它 指定 值 。 
7 Tomiient var width， 

mg ”空白 无 关 紧 要 (几乎 在 什么 地 方 都 是 如 a 不同 于 HTML 标 记 ，JavaScript 区 分 大 小 
De 写 ， 这 意味 着 大 小 写 很 重要 。counter 和 
量 4433; Counter 是 两 个 不 同 的 变量 。 

@ 将 字符 串 用 双 引 号 括 起 (也 可 使 用 单 引 


号 ， 这 两 种 方式 都 可 行 ， 只 要 统一 即 可 ) 。 
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pr 9 (os 
变 身 浏览 器 

下 面 的 JavaScript 代 碚 存在 一 些 错 
， 距 。 你 的 任务 是 次 身 浏 览 器 ， 将 其 中 
”的 错误 找 出 未。 党 成 泛 个 练习 后 ， 消 
勒 济 洒 掌 末尾 ， 着 着 你 是 否 找 出 了 





所 有 的 错误 。 





A 


// 笑话 测试 
var Joke = "JavaScript walked Into a bar....'; 
var toldJoke = "false"; 
var S$punchline = 

"Better watch out for those semi-colons." 请 不 要 过 度 关注 这 些 Java5Script 代 码 的 
0 作用 ， 重 点 是 变量 名 错误 和 语法 错误 。 


var result 


if (toldJoke == true) { 
Alert($punchline); 
} else 
alert(joke); 


B 


\\ 电影 之 夜 
Var ZiIP code = 98104; 
var JjJoe'sFavoriteMovie = Forbidden Planet; 


Var movieTickets$ = 9; 


IE (movieTicket$ >= 9) { 
alert("Too much!'"); 
} else { 


alert("We're going to see " + Joe'sFavoriteMovie); 
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要 使 用 JavaScript 准 确 地 表达 自我 ， 需 要 使 用 表达 式 。 表 达 式 的 结果 为 值 ， 
前 面 的 代码 示例 就 包含 多 个 表达 式 ， 下 面 定 其 中 之 一 : 








这 是 一 条 Javaccript 语 9， 它 将 一 * 表 示 乘 法 运算 ， 而 / 表 
个 表达 式 的 结果 赋 给 变 量 total。 示 除 法 运算 。 
y 
Vee = price - (price * (discount / 100)); 个 表达 式 计算 打折 后 
这 是 变 和 7 ee (price) ， ， 
total。 这 是 赋值 运算 香 。 这 是 一 个 表达 式 。 扣 i Ee=49 
分 比值 。 因 此 ， 如 果 价格 
人 E 为 10， 折 扣 为 20， 则 结 
如 果 你 学 过 数学 、 计 算 过 收 支 或 计算 过 税 费 ， 就 不 会 对 这 样 的 数值 表 eu 
达 式 感到 陌生 。 





还 有 字符 NT ` 所 示 : 得 到 新 字符 串 “ 
还 有 守 符 蝇 表 达 式 ， 如 下 所 示 > 将 这 些 字符 串 相 加 (拼接 ) ， 得 到 新 字符 串 。Dear 
Reader, 。 
"DD I "RR d I 下 本 
ear + eader” + 与 前 一 个 表达 式 类 似 ， 但 包含 一 个 字符 串 变量 。 冯 这 个 表 


* 
达 式 的 结果 为 focalliragiloticenpioldocious" , 
"super" + "cali" + youKnowTheRest 


phoneNumber. substring(0, 3) ~ 一 个 结果 为 字符 中 的 表达 式 。 (ea 它 返 加 表示 美 国 电话 号 码 的 字 符 串 
中 的 区 号 ， 其 中 的 工作 原理 将 在 后 面 介绍 。 


还 有 结果 为 true 或 false 的 表达 式 ， 这 种 表达 式 称 为 布尔 表达 式 。 请 
看 下 面 的 各 个 表达 式 ， 它 们 返回 true 还 是 false 呢 ? 





如 果 aqe 小 于 14， 这 个 表达 式 就 为 true， 否 则 为 false。 
age < 14 ,一 可 以 使 用 这 个 表达 式 来 判断 一 个 人 是 不 是 孩子 。 


cost >= 3.99 《名 果 cost 等 于 或 大 于 3.99， 这 个 表达 式 就 为 true， 否 则 为 
false。 如 采 这 个 表达 式 为 false， 就 准备 好 购买 减 价 商品 吧 1 


animal == "bear" 一 全 站 变量 animal 包 含 字符 


子 付 串 bear 时 ， 这 个 表达 式 为 true。 
如 果 是 这 样 ， 可 得 小 心 了 | 
表达 式 的 值 还 可 能 为 其 他 几 种 类 型 ， 将 在 本 书后 面 介绍 。 就 现在 而 言 ， 
重点 是 牢记 所 有 表达 式 的 结果 都 为 某 种 值 ， 数字、 se 或 布尔 值 。 
下 面 米 看 看 表达 式 都 有 哪些 作用 。 














” 假定 变量 youKnowTheRest 的 值 为 “fragilisticexpialidocious ” 。 
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表达 式 练习 


LT 


人 @@@ 谨 所 上阵 
NS 


请 拿 起 笔 来 ， 将 一 些 表达 式 的 作用 搞 清 楚 。 





计算 下 面 每 个 表达 式 的 值 并 写 下 来 。 是 的 ， 写 下 来 。 


将 老 妈 对 你 不 要 在 书 上 乱 写 乱 男 的 路 哈 筷 了 吧 ， 在 本 书 中 想 怎么 与 融 怎 么 与 ! 一 定 对 照 本 章 末 


尾 的 答案 ， 看 看 你 的 答案 对 不 对 。 
C 这 是 一 个 摄氏 温度 到 华氏 温度 的 转换 器 。 


(9 / 5) * temp + 32 


这 是 一 个 布尔 表达 式 。 
tnt 


3 


运算 符 == 


color == "orange" 


name +", "++ "vou've woni!" 
[4 


这 个 运算 符 判断 第 一 个 值 是 
否 大 于 第 二 个 值 。 你 也 可 以 
使 用 >= 来 判断 第 一 个 值 是 
否 大 于 或 等 于 第 二 个 值 。 


yourLevel > 5 


(level * points) + bonus 


color != "orange" 


运算 符 != 判 断 两 个 值 是 否 不 相等 。 


会 不 会 有 多 个 答案 呢 ? 只 


确 答 案 。 你 的 答案 是 什么 ) 


1000 + "108" 
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如 果 temp 为 10， 结 果 是 什么 ? 


如 果 color 的 值 为 "pink"， 这 个 表达 式 为 true 还 是 
false? 


如 果 color 的 值 为 "orange" 昵 ? 


如 果 name 的 值 为 "Martha"， 结 果 是 什么 ? 


如 果 yourLevel 的 值 为 2>， 结 果 是 什么 ? 
如 果 yourLevel 的 值 为 5， 结 果 是 什么 ? 
如 果 yourLevel 的 值 为 7， 结 果 是 什么 ? 


假设 level 的 值 为 5，points 的 值 为 30000，bonus 的 
值 为 3300， 结 果 是 什么 ? 


如 果 color 的 值 为 "pink"， 这 个 表达 式 为 true 还 是 
false? 


编码 技巧 


你 注意 到 了 吗 ? 运算 符 = 用 于 
遇 峰值 ， 而 运算 符 == 用 于 判断 相 
地 性 。 也 就 是 说 ， 给 变量 赋值 时 使 用 一 





有 二 个 正 


1 判断 两 个 值 是 否 相 等 时 使 用 两 
| 二 三 。 一 种 常见 的 编码 错误 是 ， 该 使 
用 其 中 一 个 运算 符 时 使 用 了 另 一 个 ， 


ey 
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while (juggling) { 
keepBallsInAir(); 


重复 操作 


很 多 事情 你 都 不 只 做 一 次 : 


不 停 地 吃 ， 直 到 把 碗 里 的 糖果 吃 光 。 








你 经 营 需 要 编写 代码 来 重复 执行 相同 的 操作 ， 而 JavaScript 提 供 了 多 种 反复 执 
行 循环 代码 的 方式 : while、for、 for in 和 forEach。 本 书 将 介绍 所 有 这 些 
循环 方式 ， 这 里 先 将 重点 放 在 while 循 环 上 。 


前 面 刚 讨论 过 结果 为 布尔 值 的 表达 式 ， 如 scoops > 0。 这 种 表达 式 在 while 
语句 中 扮演 着 至 关 重 要 的 角色 ， 如 下 所 示 。 








这 种 语句 包含 一 个 布尔 表达 式 ， 
while 语 句 以 关键 字 打 头 。 我 们 称 之 为 条 件 测试 (简称 为 


\ 条件 为 re， 就 扫 和 
代码 块 中 所 有 的 代码 。 
while (scoops > 0) { 


- 1 1mnN 。 
document.write("Another scoop*"); 代码 块 是 什么 呢 ) 用 花 括 号 ({}) 
scoops = scoops - 1; 括 起 来 的 代码 。 


wj 


如 果 条 件 为 true， 则 执行 代码 块 ， 并 回 过 头 
来 再 次 检查 条 件 。 如 果 条 件 为 false， 就 结束 二 就 像 前 面 说 的 一 样 : 操 
特 环 。 肥皂 、 冲 洗 、 再 重复 ! 
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JavaScript 迭 代 ) 


while 循 环 的 工作 原理 


假设 这 和 是 你 遇 到 的 第 一 个 while 循 环 ， ee oe ei 以 了 


解 其 中 的 工作 原理 。 注 意 到 这 里 新 增 了 一 条 语句 ， 它 声明 变量 scoops 并 将 
其 人 始 化 为 5。 
下 面 来 执行 这 些 代 码 。 它 首先 将 scoops 设 置 为 5。 
var scoops = 5; 
while (scoops > 0) { 
document .write("Another scoop!'<br>"); 
scoops = scoops - 1; 
} 
document .writel("Life without Ice cream isn't the same"); 
接 下 来 是 while 语 句 。 执 行 while 语 句 时 ， 我 们 首先 检查 其 中 的 条 件 ， 看 看 它 
true 还 是 falLse。 
scoops 大 于 0 吗 ? 
Var SooPs = 5; 在 我 们 看 来 ， 它 像 
while (scoops ) { 是 这 样 的 | 
document.write("Another scoop!'<br>"); 
scoops = scoops - 1; 
} 
document .write("Life without Ice cream isn't the same"); 
由 于 条 件 为 true， 我 们 开始 执行 代码 块 ， 其 中 的 第 一 条 语句 在 浏览 器 中 写 入 字符 串 
"Another scoop!<br>'。 
var scoops = 5; po De 
while (scoops > 0) { 7 erent 
document.write("Another scoop!'<br>"); I 
scoops = scoops - 1; 
} 
document .write("Life without Ice cream isn't the same"); 
18 第 1 章 
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下 一 条 语句 将 球 数 减 1， 并 将 结果 (4) 赋 给 scoops。 


var scoops = 5; 
while (scoops > 0) { 
document .write("Another scoop!<br>"); 
scoops = scoops - 1; 
} 


document.writel("Life without Ice cream isn't the same"); 


这 是 代码 块 中 的 最 后 一 条 语句 ， 因 此 我 们 返回 while 语 句 开 头 并 重新 开始 。 


var scoops = 5; 

while (scoops > 0) { 
document .write("Another scoop!<br>"); 
scoops = scoops - 1; 

} 


document .write("Life without Ice cream isn't the same"); 


再 次 检查 条 件 ， 这 次 scoops 的 值 为 4， 依 然 大 于 O。 


还 余下 很 多 球 | 


var scoops = 5; 

while (scoops > 0) { 
document .write("Another scoop!<br>"); 
scoops = scoops - 1; 

} 


document.writel("Life without Ice cream isn't the same"); 





我 们 再 次 在 浏览 器 中 写 入 字符 串 "Another scoop!<br>"。 


yD icecream! 


Cy 

var scoops = 5; RD ocahos eo 
Another scoon 
p! 


while (scoops > 0) { = Another scoopl 
document .write("Another scoop!'<br>"); 


scoops = scoops - 1; 





} 


document .write("Life without Ice cream isn't the same"); 
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JavaScript 的 while 循 环 


20 


下 一 条 语句 将 球 数 减 1， 并 将 结果 (5) 赋 给 scoops。 吃 掉 了 2 球 ， 
还 余下 5 球 ! 
var scoops = 5; 







while (scoops > 0) { 
document .write("Another scoop!'<br>"); 
scoops = scoops - 1; 
} 


document .writel("Life without Ice cream isn't the same"); 


这 是 代码 块 中 的 最 后 一 条 语句 ， 因 此 我 们 返回 while 语 句 开 头 并 重新 开始 。 


var scoops = 5; 

while (scoops > 0) { 
document .write("Another scoop!<br>"); 
scoops = scoops - 1; 

} 


document .writel("Life without Ice cream isn't the same"); 


再 次 检查 条 件 ， 这 次 scoops 的 值 为 3， 依 然 大 于 0O。 


还 余下 很 多 球 ! ”> 
var scoops = 5; ee 
while (scoops > 0) { 


document .write("Another scoop!'<br>"); 
scoops = scoops - 1; 
} 


document .writel("Life without Ice cream isn't the same"); 


我 们 再 次 在 浏览 器 中 写 入 字符 串 "Another scoop!<br>"。 


var scoops = 5; 

while (scoops > 0) { a Another scoop! 
document .write("Another scoop!'<br>"); 
scoops = scoops - 1; 


} 


document .writel("Life without Ice cream isn't he same"); 
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天 石 | 二 、\ 人 、、 填 工 DJ 夕 告 入 ~ 、 儿 吃 掉 了 355 球 ， 还 
正如 你 看 到 的 ， 这 个 过 程 将 不 断 重 复 。 在 每 次 循环 中 ， 我 们 都 将 we 
scoops 减 1， 再 次 将 指定 的 字符 串 写 入 浏览 器 并 重新 开始 。 ~ > np 





.SS Dee 
var scoops = 5; wt 
E 《 Anothie sosM~BethyHRS yor 一 
while (scoops > 0) { Another soon! ra mm 
document .write("Another scoop!'<br>"); Alother scoop! Ts 
SCOOD/ 
scoops = scoops - 1; 
document .writel("Life without Ice cream isn't the same"); 
续 扫 行人 磊 王 睛 
继续 执行 循环 。 02 抒 了 4 球 ， 
还 余下 1 球 | >. 老 
Var scoops = 5; mm 
while (scoops > 0) 1 Ee me 
计 D localhos bs 
document.write("Another scoop!<br>"); Another soos eset /maneeriy = ms 
An ] tk ‘Cecream.htm = ~- ig 
scoops = scoops - 1; Another Scoop! 有 
Anotherscoopy 
Ano er scoop! 


} 


document.writel("Life without Ice cream isn't the same"); 


吃 掉 了 5 球 ， 一 球 不 





执行 最 后 一 次 循环 后 ， 情 况 有 点 不 同 : scoops 为 0， 加 此 条 件 为 false。 
这 次 到 达 了 分 水 岭 ， 我 们 不 再 继续 循环 一 一 不 执行 代码 块 。 这 次 我 们 跳 过 和 了 > 
代码 块 ， 执 行 它 后 面 的 语句 。 





var scoops = 5; 

while (scoops > 0) { 
document .write("Another scoop!<br>"); 
scoops = scoops - 1; 


} 


document .writel("Life without Ice cream isn't the same"); 


\ 


现在 ， 我 们 执行 另 一 条 document.write 语 句 ， 在 浏览 器 中 写 入 字符 串 "Life = 


without ice cream isnt the same"。 至 此 ， 全 部 代码 都 执行 完毕 了 | ”GADioamovon 
Another sco0p! mn htrnl _ 同 容 
var scoops = 5; A ecoop! 一 
while (scoops > 0) { Another scoopl 
document.write("Another scoop!<br>"); [Wang 
at lce cream isn't the Same 


scoops = scoops - 1; 


} 
document.writel("Life without Ice cream isn't the same"); 
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JavaScript 条 件 











if (cashInWallef > 5) { 
order = 工 || take the works: cheeseburger, fries and a coke ; 
}else{ 

order = “I'l| just have a glass of wafer 


使 用 JavasScript 进 行 决策 


你 刚才 看 到 了 ， 在 while 语 句 中 ， 可 使 用 条 件 来 决定 是 否 继续 循环 。 在 JavaScript 中 ， 
还 可 在 if 语 句 中 使 用 布尔 表达 式 来 进行 决策 。 仪 当 if 语 句 的 条 件 测试 为 true 上 时 ， 才 
会 执行 其 代码 块 ， 如 下 例 所 示 。 


晤 儿 
这 是 关键 子 if， 后 加 站 宗 


Wr 9 块 。 UV 
> 


上 了 < 3 1 刀 一 如 果 少 于 3 球 ， 就 执行 让 语句 的 代码 块 。 


alert("Ice cream is running low!"); 


这 个 条 件 检 查 球 数 是 否 少 于 35。 


I 
函数 alert 接 受 一 个 字符 串 ， 并 在 浏览 器 中 显示 一 个 包含 该 字 一 > (2 ea 和 
符 串 的 弹出 式 对 话 框 。 试 一 试 吧 | 


Co 
在 if 语句 中 , 还 可 添加 一 个 或 多 个 else if 语 句 ， 以 执行 多 重 检 查 ， 如 下 所 示 : 
使 用 if/else 计 语句 ， 可 依 
if (scoops >= 5) { ya 次 进行 两 次 检查 。 
alert("Eat faster, the Ice cream is going to melt!"); 
} else if (scoops < 3) { 人 一 一 一 可 根据 需 要 添加 任意 数量 的 else if 语句 ， 以 检查 多 个 
alert("Ice cream is running low!"); 条 件 。 每 条 else if 语 句 都 有 其 代码 块 ， 该 代码 块 将 在 
} 条 件 为 true 时 执行 。 


进行 大 量 决 策 





可 根据 需要 将 任意 数量 的 if/else 语 句 串 接 起 来 ， 还 可 在 最 后 添加 一 条 包罗 万 象 的 else 





语句 ， 以 处 理 所 有 条 件 部 不 满足 的 情形 ， 如 下 所 示 。 


在 这 个 代码 段 中 ， 我 们 检查 余下 的 球 数 是 


< 6 “ 少 于 5 eee 


if (scoops >= 5) { 


alert("Eat faster, the Ice cream is going to melt!"); 


3) { 


} else if (scoops 


一 一 ……… 是 否 刚 好 为 5…… 


alert("Ice cream is running low!"); 


} else if (scoops == 2) { 


alert("Going once!"); 


} else if (scoops == 1) { 
alert("Going twice!"); 


} else if (scoops == 0) { 


alert("Gone!"); 


} else { 


alert("Still lots of Ice cream left, come and get it."); 


4 

上 o] ;代码 块 到 底 是 什么 ? 

A l 

只 。 从 语法 上 说 ， 代 码 块 是 放 在 花 
扒 王 向 的 二 组 证 商 ， 司 以 只 外 全 一 条 
语句 ， 也 可 以 和 包含 任意 数量 的 语句 。 
代码 块 中 的 所 有 语句 被 视 为 一 个 整体 ， 
要 么 都 执行 ， 要么 都 不 执行 。 例 如， 
在 while 语 名 中 ， 如 果 其 条 件 为 true， 
将 执行 其 代码 块 中 的 所 有 语 身 。1E 和 
else if 语 名 的 代码 块 亦 如 此 。 


人 上 一 


eA 


如 有 果 上 述 条 件 都 不 满足 ， 就 


执行 这 段 代 码 。 


世上 滩 和 
晶 知 的 问题 


人 

人 o] ， 我 遇 到 过 这 样 的 代码 ， 其 中 的 
条 件 是 一 个 变量 ， 而 这 个 变量 的 值 为 
字符 串 而 不 是 布尔 值 。 请 问 这 种 代码 
是 如 何 工作 的 ? 


AAA ， 

吟 ' ， 本 书 稍 后 会 讲 到 这 一 点 ; 简单 
地 说 ，JavaScript 在 判断 值 为 true 还 
是 false 方 面 非常 灵活 。 例 如 ， 任 何 
包含 非 空 字符 串 的 变量 都 被 视 为 上 rue， 
而 没有 设置 值 的 变量 都 被 视 为 false。 
这 些 细节 各 后 介绍 。 


>》 

[| ;你 说 过 ， 表 达 式 的 结果 可 能 不 
是 数字 、 字 符 串 或 布尔 值 。 请 问 还 可 
能 有 哪些 值 ? 


ae 是 否 为 2、1 或 0， 并 显示 相应 的 


HA 


JavaScript 速 览 





AAA ， 
只 我 们 当前 的 重点 是 基本 类 型 ， 
即 数字 、 字 符 串 和 布尔 值 。 本 书后 面 


将 介绍 更 复杂 的 类 型 ， 如 数组 (一 系 
列 值 ) 、 对 和 象 和 函数 。 


》 
[9) s 布尔 值 (boolean) 是 如 何 得 
名 的 ? 


A 

喉 布尔 值 是 以 发 明 布 尔 运 辑 的 英 
数学 家 George Boole 命 名 的 。 在 英文 
中 ，boolean 常 被 写作 Boolean， 旨 在 指 
出 这 种 变量 类 型 是 以 George Boole 命 名 
ys 
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代码 冰箱 贴 练 习 


代 阅 冰 攻 巾 





正确 地 排列 议 些 冰箱 贴 ， 组 成 一 个 
能 运行 的 JavaScript 程 序 。 Y 


有 一 个 JavaScript 程 序 的 代码 被 随机 地 贴 在 冰箱 上 。 你 能 将 这 些 冰 箱 贴 放 到 正确 的 位 
. 、 4/ o | 小 外 一 /4 、 v 置 上 ， 
组 成 一 个 生成 如 下 输出 的 Javascript 程 序 吗 ? 请 对 照 本 章 末 尾 的 答案 ， 再 继续 往 下 阅读 。 


document.write("Happy Birthday dear " + name + " <br>"); 


document .write("Happy Birthday to you.<br>") 


var i = 0; 


i=i+1:; 






var name = "Joe"; 


document .write("Happy Birthday to you.<br>"); 


while (i < 2) { 


‘ 


请 在 这 里 正确 地 排列 这 
些 冰 箱 贴 。 


. 
r 


正确 地 排列 这 些 冰 箱 贴 后 ， 
-成 的 程序 将 生成 如 下 输出 ; 





QA /DD Happy Birthday x 








所 CGC 站 | [localhost/~Beth/HFJS/chapterl/birthday.html So) » 


Happy Birthday to you. 
Happy Birthday to you. 
Happy Birthday dear Joe, 
Happy Birthday to you. 
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与 用 户 Rx 和 WC 


前 面 一 直 在 讨论 如 何 提 高 网 页 的 交互 性 ， 为 此 你 必须 能 够 与 
用 户 交 流 。 实 际 上 ， 0 其 中 的 一 些 
你 在 本 章 前 面 已 经 见 到 过 。 下 面 倍 要 地 介绍 这 些 交 流 方式 ， 
本 书后 面 将 更 详细 地 讨论 它们 。 














凶 建 拓 柄 杠 


正如 你 已 经 看 到 的 ， 浏 览 器 提供 了 提醒 用 户 的 快捷 方式 一 一 使 用 
函数 alert。 你 只 需 调用 函数 alert 并 指定 一 个 包含 提醒 消息 的 
字符 串 ， 浏 览 器 就 会 在 一 个 漂亮 的 对 话 框 中 显示 这 条 消息 。 必 须 
承认 ， 由 于 alert 易 于 使 用 ， 我 们 一 直 在 滥用 它 ， 实 际 上 , 仪 当 
你 要 停止 一 切 并 提醒 用 户 时 ， 才 应 使 用 它 














SN 本 章 将 使 用 这 三 种 交流 
直 笠 写 入 元 特 双方 读 。 
将 网 页 视 为 一 个 文档 〈 浏 览 右 就 是 这 么 认为 的 ) 。 你 随时 都 可 使 用 国 数 
document.write 将 任何 HTML 和 内 容 写 入 网 页 ， 这 虽然 很 弟 见 ， 但 通 
第 被 认为 是 一 种 糟糕 的 做 法 。 本 革 也 偶尔 使 用 了 这 个 函数 ， 因 为 这 是 一 
种 简单 而 容易 黎 握 的 网 页 操作 方式 。 


借用 和 拦 制 台 
CI 可 将 代码 中 的 消息 号 人 其 中 。 要 将 衣 4 一 在 帮助 找 出 代码 错误 方面 ， 控 制 台 
息 写 入 控制 台 日 志 ， 可 使 用 图 数 console.1og， 并 传人 要 写 入 的 字符 串 真 的 非常 方便 ! 出 现 输入 错误 (如 
( 稍 后 将 更 详细 地 介绍 如 何 使 用 控制 台 日 志 ) 。 可 将 console.1og 视 为 误 漏 了 引号 ) 时 ， JavaScript 通 党 会 
杰出 的 故障 排除 工具 ， 但 用 户 通常 看 不 到 控制 台 日 志 ， 因 此 这 并 非 与 用 在 控制 台中 显示 错误 消息 ， 帮 助 你 
找 出 这 种 错误 。 
户 交 流 的 有 效 方式 。 





直接 拘 作 元 竺 


文 是 最 佳 的 方式 ， 你 应 尽量 使 用 这 种 方式 来 与 网 页 和 用 户 交 互 。 使 用 

JavaScript 可 以 访问 网 页 ， 读 取 和 修改 其 内 容 ， 甚 至 修改 其 结构 和 样式 | 这 这 是 我 们 的 终极 目标 ， 刷 
a (后 面 将 更 详细 地 讨论 实现 的 。 你 时 你 将 能 够 以 各 种 方式 读 
将 看 到 ， 这 是 与 用 户 交流 的 最 佳 方式 。 然 而 ， 要 使 用 文档 对 象 模型 ， 你 必 于 (oT 
须知 道 网 页 的 结构 ， 并 熟悉 用 来 读 写 网 页 的 编程 接口 。 这 些 都 将 在 稍 后 介 

绍 ， 在 此 之 前 ， 我 们 需要 更 深入 地 了 解 JavaScript。 
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比较 JavaScript 输 出 方法 





将 右 


你 能 揭 下 它们 的 面具 ， 
配 起 来 吗 ? 我 们 已 经 将 一 种 交流 万 法 与 


并 
日 


| 一 

4 

显 

发 
惟 拖 
全 恤 
吓 膨 
是 髓 
NS 
禄 SI 。 
秀 池 六 
尽 蒜 喘 
优 下 起 
羽 物 拖 
民 汪 把 
款 凡 村 


document.write 


咽 长 坦 在 
全 瞩 呢 路 
人 < 咖 吐 塘 
异 伴 刺 未 


= 


能 耳 叹 长 纪 


console.log 


? 


alert 


入 开发 人 员 


二 一 
息 写 


可 将 
抽 


已 


一 种 简单 的 调试 工具 ，。 


文档 对 象 模型 


髓 
四 
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console .1Log 详 述 


下 面 来 更 深入 地 探索 console.Log 的 工作 原理 ， 以 便 在 本 章 中 使 用 它 来 
查看 代码 的 输出 ， 并 在 全 书 中 使 用 它 来 查看 代码 的 输出 以 及 调试 代码 。 

但 别 闷 了 ， 控 制 台 并 非 普 通 Web 用 户 能 够 明白 的 训 览 右 功 能 ， 因 此 不 应 在 
网 页 的 最 终 版 本 中 使 用 它 。 将 请 朋 eS 通常 仅 用 于 在 开发 网 页 


期 间 调 试 代码 ， 但 在 学 习 JavaScript 时 ， 这 是 一 种 了 解 代码 功能 的 极 佳 方 


式 。console.Log 的 工作 原理 如 下 : 
人 





lcs 
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eeeeee 


var message = "Howdy" + " "+ "partner"; 


console.log (message); 


将 其 传递 给 console.log， 该 字符 串 将 显 


示 在 浏览 器 的 控制 台中 ， 加 下 所 示 。 


J 





Elements Resources Network Sources 


Howdy partner 


/| 


控制 台 包 含 代码 写 入 到 日 志 的 
所 有 输出 。 
DD QQ © <topframe>v <pagecontext> 
易 这 的 问题 
输出 传递 给 它 。 请 牢记 这 一 点 ， 本 书 


y 
BD) a 
| 5) 我 知道 console.log 可 用 于 输 后 面 将 回 过 头 来 深入 讨论 对 象 ， 现 在 ， 


出 字符 串 ， 但 它 到 底 是 什么 东西 呢 ? 你 具备 了 使 用 console.log 所 需 的 全 
我 是 说 为 何 使 用 句点 分 隔 console 和 新 知 识 ， 
log 呢 ? 
8 

谷 ， i ee 9): 除了 写 入 日 志 外 ， 控 制 台 还 有 

es 问 得 好 ,我 们 讲 得 有 点 太 快 了 ， 其 他 功能 吗 ? 
你 可 将 控制 台 视 为 具有 特定 功能 的 对 ps 
象 。 其 功能 之 一 是 写 入 日 志 ， 而 要 让 地， 有 ， 但 大 家 通常 只 用 它 来 写 入 
控制 台 执 行 这 种 功能 ， 我 们 使 用 语法 上 下、， 百 惠 【种 悦 币 过 ) 还 有 一 些 高 
console.1odg， 并 将 用 圆 持 号 括 起 的 级 用 法 ， 但 这 些 用 法 通常 随 浏览 器 而 


Timeline 


Profiles Audits | Console | 


howdy.html:21 


Errors Warnings 糙 


已 
2 o 


了 控制 
规范 中 。 


人 

人 ] ;控制 台 看 起 来 很 不 错 ， 但 在 吨 
里 能 够 找到 它 呢 ?》 我 在 代码 中 使 用 了 
它 ， 却 没有 看 到 任何 输出 ! 

A 和 

只 。 在 大 多 

地 打开 控制 台 避 ， 


所 有 现代 浏览 器 都 提供 
但 控制 台 己 并 不 包 念 在 正 式 


请 注意 ， 


人 
忆 ， 


数 浏览 器 中 ， 都 可 显 式 
详情 请 参阅 下 一 页 。 
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使 用 JavaScript 控 制 台 


打开 控制 名 


不 同 认 贤 备 的 控制 台 实 现存 在 细微 的 差异 ， 更 粳 糕 的 是 ， 六 览 絮 实 现 控 制 台 的 
方式 变化 相当 频 索 一 一 虽然 没有 达到 离谱 的 程度 ， 但 当 你 阅读 本 书 时 ， 你 的 训 
昂 奋 控制 台 可 能 与 这 里 显示 的 各 有 不 同 。 

这 里 介绍 在 Mac 上 如 何 访 问 Chrome 六 览 器 (25 版 ) 的 控制 台 。 对 于 如 何在 各 种 
主流 浏 览 絮 中 访问 控制 台 ， 请 参阅 http://wickedlysmart.com/hfjsconsole。 明 白 如 
何在 一 球 浏 览 如 中 访问 控制 台 后 ， 束 很 容易 搞 靖 楚 如 何在 其 他 六 览 如 中 访问 控 
制 台 了 。 建 议 你 至 少 在 两 蒜 肇 贤 絮 中 尝试 使 用 控制 台 ， 这 样 才 更 熟悉 。 





WI History Bookmarks Window Help 5 下 二 
[(@) 、 、 二 | 
"Always Show Bookmarks Bar 全 3B 在 Mac 二 ee I9l Chrome 的 控 制 
BB ww | stop a 台 ， 请 选择 东单 View > Developer > 
Ed hs Page fe JavaScript Console。 
4 Enter Presentation Mode F - 
Enter Full Screen 
Actual Size 
Zoom In 
Zoom Out 





Encoding p 


Viewsource TgU 


| Developer Tools el 


EVE Rd -| | 








NE 大 KY 
控制 台 将 出 现在 浏览 器 者 
OQ/n - 
re 人 条 oa 一 2 长 的 底部 。 
© SC 人 | D localhost/~Beth/HES/chapterl/howdy.html xj >| 三 








在 控制 台 顶 部 的 选项 卡 中 ， 


中 Elements Resources Network Sources Timeline Profiles Audits | Console | 确 位 选 择 本 标 签 Consol eo 
Howdy partner howdy. html:21 


> | 


在 这 个 窗口 中 ， 你 将 看 到 
加 ] 注 | Q | © |<topframe>v | <page context> ”OD | Emors war 交 在 代码 中 使 用 console.log 
喧 示 的 所 有 消息 。 
不 要 考虑 其 他 标签 的 作用 。 这 些 标签 都 很 有 
用 ， 但 自前 最 重要 的 是 Console， 它 能 够 让 你 
看 到 在 代码 中 使 用 console.log 显 示 的 所 有 消息 。 
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编写 一 个 正 式 的 应 有 程序 


下 面 将 新 学 到 的 JavaScript 技 能 和 cons Ole. 1og 付 诸 应 用 编写 一 
个 实用 的 应 用 程序 。 我 们 需要 一 些 变量 、 一 条 while 语 句 和 一 些 带 
else 子 句 的 if 语句 。 再 进行 简单 打磨 ， 不 知 不 觉 间 就 将 得 到 一 个 
正式 的 商务 应 用 程序 。 查 看 最 终 代码 前 ， 先 想 想 你 会 如 何 编写 一 个 
程序 来 显示 经 典 歌 曲 99 Bottles of Beer 的 歌词 。 


Var word = "bottles"; 





var count = 99; 
while (count > 0) { 
console.log(count + " " + word + " of beer on the wall"); 

console.log(count + " " + word + " of beer,"); 
console.log("Take one down, pass it around,"); 
count = count - 1; 
If (count > 0) { 

console.log(count + " " + word + " of beer on the wall."); 
} else { 


console.log("No more " + word + " of beer on the wall."); 










上 述 代码 存在 一 个 小 缺陷 ， 它 能 正确 地 运行 ， 但 输 
出 并 非 完 美 无 缺 。 你 能 找 出 并 修复 这 个 缺陷 吗 ? 
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30 


第 1 章 


我 们 是 不 是 应 该 将 这 些 代 
码 放 到 网 页 中 ， 以 便 能 够 看 到 和 给 
出 呢 ? 如 果 不 这 样 ， 就 得 继续 在 纸 
上 写 出 答案 了 ! 













好 主意 ! 是 的 ， 是 时 候 这 样 做 了 。 这 样 做 之 
前 ， 我 们 想 确 保 你 具备 了 足够 的 JavaScript 
知识 。 你 在 本 章 开 头 看 到 了 ， 可 像 添 加 CSS 
一 样 在 HTML 中 添加 JavaScript， 也 就 是 说 ， 
只 需 使 用 标签 <script> 来 添加 它们 即 可 。 








这 里 要 说 的 是 ， 与 CSS 一 样 ， 也 可 将 
JavaScript 放 在 独立 于 HTML 的 外 部 文件 中 。 
下 面 先 将 这 个 正式 的 商务 应 用 程序 放 到 
网 页 中 。 经 过 详尽 的 测试 后 ， 再 将 这 些 
JavaScript 代 码 移 到 一 个 外 部 文件 中 。 


编写 如 下 HTML 人 代码， 你 将 在 其 中 能 入 JavaScript 人 代码。 本 
码 ， 再 在 <script> 标 签 之 间 输 入 前 面 列 出 的 JavaScript 代 码 。 你 可 使 用 记 

Wi 等 编辑 器， 并 确保 处 于 纯 文本 模式 ， 也 可 使 用 自 
Coda 或 WebStorm。 


(Windows) 或 TextEdit (Mac) 


己 喜 欢 的 HTML 编 辑 器 ， 如 Dreamweaver、 


合 入 
<!dqoctyPe html> 人 一、 输入 


<html lang="en"> 
<head> 


下 面 在 浏览 器 
看 最 终 的 结果 。 


中 运行 /一 


要 下 载 本 书 的 代码 和 示例 文件 ， 请 


wickedlysmart.com/hfjs。 


<meta charset="utf-8"> 
<title>My First JavaScript</title> 


</head> 
<body> 


<script> ~ 


</script> 
</body> 
</html> 


将 这 个 文件 保存 为 index.html。 


在 网 页 中 9 你 什么 都 看 不 到 9 
所 有 输出 都 写 入 了 控制 合 。 因 此 ， 


这 些 是 <script> 标 签 。 现在 你 应 该 知道 
Java5Script 代 码 放 在 这 两 个 标签 乙 间 。 


广 些 HTML 代 码 。 


拖 放 到 浏览 昌 
在 浏览 器 中 加 载 这 个 文件 。 可 以 ; 将 这 个 文件 5 
窗口 中 ， 也 可 在 浏览 器 中 选择 菜单 “文件 ”>“ 打 开 


为 我 们 使 用 console.log 将 


自己 编写 了 一 个 正式 的 商务 应 用 程序 。 


这 是 代码 的 运行 情况 ， 它 们 生成 歌曲 99 Bottleso 


Beer 的 完整 歌词 ， 并 将 其 写 


入 浏览 器 的 控制 台 。 


请 打开 控制 合 ， 
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一 些 代 码 。 请 按 如 下 说 明 来 运行 这 个 正式 的 商务 应 用 程序 ， 并 查 
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99 bottles of beer on the wall 
99 bottles of beer， 
Take one down, pass it around, 


98 bottLes of beer on the wall. 


98 bottles of beer on the wall 
98 bottles of beer, 
Take one down, pass it around， 


97 bottles of beer on the wall. 


97 bottLes of beer on the wall 
97 bottles of beer, 
Take one down, pass it around, 


96 bottles of beer on the wall. 


96 bottles of beer on the wall 
96 bottLes of beer, 
Take one down, pass it aroung, 


95 bottles of beer on the wall 


95 bottles of beer on the wall 
95 bottles of beer, 
Take one down, pass it aroundg, 


94 bottles of beer on the wall. 


94 bottles of beer on the wall 
94 bottles of beer, 
Take one down, pass it around, 


93 bottLes of beer on the wall. 


93 bottles of beer on the wall 
93 bottles of beer, 
Take one down, pass it arounad， 


92 bottles of beer on the wall. 


92 bottles of beer on the wall 
92 bottles of beer, 

Take one down, pass it around， 
91 bottles of beer on the wall. 
91 bottles of beer on the wall 
91 bottLes of beer, 

Take one down, pass it aroungd, 


= QO 


<top frame> 理 <page context> 





Vv 


index. html:13 
index.html:14 
index.html:15 
index.html:18 
index,html:13 
index. htmi:14 


index.html:15 


index.html;18 
index.html:13 


index,htm1:14 


index.htm1L:15 


index.html:18 


index.html;13 
index.html:14 


index.html:15 


index.htmi:18 
index.html:13 


lindex.html:14 


index.html:15 
index.html:18 


index.htm1L:13 
index.html:14 


index.html;15 


index.html:18 
index.html:13 


index.htmi;14 


ingdex.html:15 
index.html:18 


index.html:13 


index,htm13:14 
index.htm1L:15 
ingdex.html:18 
index.html:13 
index.html:14 
index.html:15 
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如 何 将 JavaScript 代 码 加 入 网 页 


如 何 将 JavaScript 代 码 加 入 网 页 〈 细 数 和 名 种 方式 ) 

你 已 经 知道 可 以 使 用 <script> 标 签 将 JavaScript 代 码 添 加 到 网 页 的 <nead> 或 <body> 元 素 中 ， 但 还 
有 男 外 两 种 在 网 页 中 添加 JavaScript 代 码 的 方式 。 下 面 来 看 看 可 将 JavaScript 代 码 放 在 哪些 地 方 〈 以 
及 将 代码 放 在 一 个 地 方 而 不 是 另 一 个 地 方 的 原因 ) 。 
可 将 代码 散 入 <head> 元 素 中 。 在 网 

页 中 添加 代码 时 ， 最 常见 的 方式 是 在 

<head> 元 素 中 添加 一 个 <script> 元 

素 。 这 让 你 的 代码 更 容易 找到 ， 好 

像 也 是 放置 代码 的 合理 位 置 ， J 你 的 HHTAL 页 面 


还 可 将 代码 放 在 独立 的 文件 中 ， 并 在 
<head> 中 链接 该 文件 。 这 与 链接 到 
CSS 文 件 类 似 ， 唯 一 的 差别 是 ， 你 使 

用 <script> 标 签 的 src 特 性 来 指 
定 JavaScript 文 件 的 URL。 





这 并 非 总 是 最 佳 方式 。 为 什么 


a ee 放 在 外 部 文件 中 ， 代 码 更 容 
pe 易 维护 (独立 于 HTML) ， 

</script> 还 可 用 于 多 个 网 页 。 但 这 种 

y \ SE 方法 也 有 缺点 ， 那 就 是 所 有 


也 可 以 将 代码 内 藤 在 网 页 的 
<body> 元 素 中 。 为 此 ， 可 将 
JavaScript 代 码 放 在 <script> 


部 分 之 前 加 载 。 还 有 更 佳 
的 方式 吗 ? 请 继续 往 下 看 。 


元 素 中 ， 并 将 <script> 元 素 

放 到 网 页 的 <body> 元 素 中 ( 通 
曾 是 最 后 ) 。 

这 种 方法 要 好 些 。 为 什么 呢 ? 
浏览 器 加 载 网 页 时 ， 将 先 加 载 
<head> 元 素 内 的 所 有 内 容 ， 骨 加 
载 <body> 元 素 。 因 此 ， 如 果 将 代 
码 放 在 <head> 中 ， 用 户 可 能 必须 
等 一 会 儿 才 能 看 到 网 页 。 如 果 将 代 
码 放 在 <body> 的 HTML 后 面 ， 则 用 
户 等 待 这 些 代 码 加 载 时 就 能 看 到 网 
页 的 内 容 。 


还 有 更 好 的 方法 吗 ? 请 接着 往 下 看 。 A 





<script> 
statement:; 
statement:; 


</script> 三 | 
全 最 后 ， 可 在 网 页 的 <body> 


— \ 3 立 SS 


是 鱼 和 熊 掌 兼 得 的 最 佳 方式 ， 

既 有 一 个 可 用 于 任何 网 页 且 易 

于 维护 的 JavaScript 文 件 ， 又 在 

网 页 末尾 引用 它 ， 这 样 它 将 在 网 
页 加 载 完毕 后 再 加 载 。 真 不 销 。 






虽然 情况 完全 相反 ， 

但 我 依然 认为 <head> 是 放 
置 JavaSeript 代 码 的 极 佳 
位 置 。 





ey 


JavaScript 速 览 


标 打 加 丛 敬 


分 手 是 痛 吉 的 ， 但 必须 这 样 做 。 现 在 该 将 JavaScript 代 码 提 取出 来 ， 移 到 一 个 独 
立 的 文件 中 了 ， 有 共 体 步骤 如 下 。 





打开 文件 index.html， 选 择 其 中 所 有 的 JavasSceript 代 码 ， 即 标签 <script> 
之 间 的 所 有 内 容 ， 如 下 所 示 。 


<Idoctype html> 
<html] lang="en"> 


<head> 
<meta charset="utf-8"> 
<title>My First JavaScript</title> 


</head> 选择 JavaScript 代 码 ， 不 妥 包含 <script> 标 
<body> > 因为 在 独立 文件 中 不 需要 这 些 标签 。 
<script> 
Var word = "bottles"; 
var count = 99; 


while (count > 0) { 
console.log(count + " " + word + " of beer on the wall"); 
console.log(count + " " + word + " of beer,"); 
console.log("Take one down, pass it around,"); 
count = count - 1; 
If (count > 0) { 

console.log(count + " " + word + " of beer on the wall."); 

} else { 


console.log("No more " + word + " of beer on the wall."); 


} 
</script> 
</body> 
</html> 


@) 在 编辑 器 中 新 建 一 个 文件 ， 将 其 命名 为 0dejs， 冯 将 前 面 复制 的 代码 粘贴 
到 其 中 ， 然 后 保存 。 
code.js 7/ 
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外 部 JavaScript 代 码 


现在 需要 在 文件 index.html 中 添加 一 个 指向 文 Hobo em 3) 用， 以 便 
® 该 网 页 加 载 时 获取 着 加 载 文 件 c0de.js。 为 此 ,将 文 ea 
JavasSceript 代 码 删 除 ， 但 保留 <script> 标 签 ， 再 在 <script> 开 始 标 


签 也 添加 一 个 引用 co0de.js 的 src 特 性 。 


<Idoctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 
<title>My First JavaScript</title> , 
使 用 <script> 元 素 的 src 特 性 


</head> | 
<body> 2 链接 到 JavaScript 文 件 。 


<script src="code.J]s"> 


> A 这 是 被 删除 的 代码 所 处 的 位 置 ， 


oy a 尔 ，<script> 结 束 标签 依然 必 不 可 
/Rn pay ed 
























@ee 1 | My FirstjJavascript x Wl 坟 
所 CC 会 | localhost/~Beth/HFJS/chapter1 /index.htmi yr| ”| 三 
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二 | 上 荆 ht 8 在 三 并 99 bottles of beer on the wall index.html:13 
(4) 处 科 手 术 到 上 吉 束 ， 就 这 仅 [| 早 。 现 于 we 过 99 bottles of beer, index.html:14 
Take one down, pass it around, index.html:15 
行 : 由 试 了 。 为 此 ， 再 :; 人 入 加 载 indeX， htw| 果 98 bottles of beer on the wall., index.html:18 
将 C4 98 te of beer on the wall index.html:13 
3 a 大 98 bottles of beer, index.html:14 
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性 设 置 成 了 "code .js” 9 Bp 定 这 个 代 码 又 件 937 bottles of beer on the wall index,.html:13 
97 bottles of beer, index.html:14 
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与 HML 文 件 位 于 同 目 录 9 96 bottles of beer on the wall. index.html:18 
96 bottles of beer on the wall index.html:13 
96 bottles of beer, index.html:14 
Take one down, pass it aroungd, index.html:15 
95 bottles of beer on the wall., index.htmi:18 
95 bottles of beer on the wall index.html:13 
95 bottles of beer, index.html:14 
Take one down, pass it around, index.html:15 
94 bottles of beer on the wall. index.html:18 
94 bottles of beer on the wall index.html:13 
94 bottles of beer， ingdex.html:14 
结 时 应 与 前 名 相 同 | O 但 现 在 Take one down， pass it around, index.html:15 
- 口 个 同 的 93 bottles of beer on the wall. index.html:18 
HTML 和 JavaScript 位 于 不 0 93 SR of eT on the wall index.html:13 
~ LA 93 bottles of eer， index.html: 14 
文 件 中 ， 是 不 是 更 请 晰 、 更 © Take one down， pass it around， index.html:15 
促 了 op? 92 bottles of beer on the wall. index.html:18 
易 管理 、 不 那么 局 上 92 bottles of beer on the wall ingdex.html:13 
92 bottles of beer, index.html:14 
Take one down, pass it aroung, index.html:15 
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剖析 script 元 素 


你 已 经 知道 如 何 使 用 <script> 元 素 在 网 页 中 添加 代码 了 ， 但 为 了 彻底 明白 这 个 
主题 ， 下 面 来 复习 一 下 <script> 元 素 ， 确 保 不 放 过 任何 一 个 细节 。 





特性 type 告 诉 浏览 器 ， 你 去 编写 JavaScript 代 码 。 如 果 和 省 上 略 
这 个 属性 ， 浏览 器 将 假定 你 使 用 的 是 JavaScript。 答 于 此 ， 
我 们 建议 你 省 略 这 个 属性 ， 标 准 制定 者 也 是 这 样 建 议 的 。 


\ 别 忘 了 起 始 标签 
中 的 右 尖 括号 。 
ipt> 起 始 ="text/javascript" oii 
<5cript <script ltype e J 
标签 。 一 "到 二 DR 
"Hello wor1ld!"); | 一 <“<script> 标 签 之 间 的 所 有 内 容 都 
SS 从 须 是 有 效 的 JavaScript 代 码 。 
LP 七 > 
在 任何 情况 下 ，</script> 
结束 标签 都 必 不 可 少 。 
在 HTML 中 引用 独立 的 JavaScript 文 件 时 ， 像 下 面 这 样 使 用 <script> 元 素 : 


洪 加 一 个 src 特 性 来 指定 JavaScript 
文件 的 URL。 


# 
src="myJavaScript.js" 
; “3 JavaScript 文 件 使 用 


引用 独立 的 JavaScript 文 件 时 ee 
Tt ipt 代 码 。 
干 万 别 忘 了 </script> 结 束 标 ”元 素 不 能 包 久 任何 Java5cript、“ 
签 | 即便 是 链接 外 部 文件 
时 ， 这 个 标签 也 必 不 可 少 ， 


A CTE UO 


不 能 在 引用 JavaScript 文 件 的 同时 内 嵌 JavaScript 代 三 。 





使 用 src 特 性 时 ， 不 能 在 <script> 标 签 之 间 添 加 
小 心 ! Java3cript 代 码 。 在 这 种 情况 下 ， 需 要 使 用 两 个 <script> 
: 元 素 。 
a SIC="goodies.js"> A 
Var "guiTeok hock": -AN 


see 颖 六 
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采访 JavaScript 





Head First: 欢迎 JavaScript。 我 们 知道 你 始终 忙于 
处 理 各 种 网 页 ， 很 高 兴 你 在 百 忙 之 中 抽出 时 间接 受 访 
谈 。 

JavaScript: 没什么 。 我 的 确 比 以 前 更 忙 了 ， 现 在 我 不 
仅 被 用 于 几乎 所 有 的 网 页 ， 还 被 用 于 实现 简单 的 菜单 
效果 和 功能 齐备 的 游戏 等 。 真 是 忙 得 不 可 开交 | 

Head First: 真 令 人 惊讶 。 束 在 几 年 前 ， 还 有 人 说 你 不 
过 是 一 款 无 用 的 脚本 语言 ， 而 现在 到 处 都 能 看 到 你 的 
身影 。 

JavaScript: 以 前 的 事 就 别 说 了 。 我 取得 了 长 足 的 进 
步 ， 很 多 杰出 人 物 都 为 此 付出 了 艰 兰 努 


Head First: 取得 了 什么 进步 呢 ?” 你 的 基本 语言 特性 看 
起 来 不 是 跟 以 前 一 样 吗 ? 


JavaScript: 这 表现 在 两 个 方面 。 首 先 ， 现 在 我 的 速度 
快 如 办 电 。 我 虽然 被 视 为 脚本 语言 ， 但 性 能 几乎 能 够 
与 编译 型 语言 媲 ; 


Head First. 其 次 呢 ? 


JavaScript: 在 麟 览 副 中 ， 我 能 够 做 的 事情 多 得 多 了 。 
通过 使 用 所 有 现代 六 览 絮 都 有 的 JavaScript 库 ， 你 可 
确定 当前 位 置 ， 播 放 视 频 和 音频 ， 在 网 页 中 绘图 ， 等 
等 。 但 要 完成 这 些 任务 ， 你 必须 见 悉 JavaScript。 


Head First: 咱们 来 说 说 对 你 的 批评 吧 。 我 听 过 一 些 不 
那么 友好 的 评论 ， 其 中 最 阁 名 的 是 “一 蒜 粗 制 滥 造 的 
1 = 

JavaScript: 走 目 己 的 路 ， 让 别人 去 说 吧 。 我 即便 不 是 
世界 上 使 用 最 广泛 的 语言 ， 也 是 其 中 之 一 。 我 击败 了 
很 多 竞争 对 手 。 还 记得 将 Java 用 于 浏览 器 的 倡导 吗 ? 现 
在 看 来 就 是 个 笑话 。 还 有 VBScript、JScript、Flash.、 
Silverlight…… 不 胜 枚 举 。 你 说 说 ， 我 怎么 就 不 行 呢 ? 


Head First: 有 人 批评 你 “过 分 简单 ”。 
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本 周 访 谈 : 逐渐 了 解 JavaScript 





JavaScript: 坦率 地 说 ， 这 是 我 最 大 的 优点 。 事 实 上 ， 
只 要 局 动 训 览 右 ， 输 入 几 行 JavaScript 代 码 ， 束 万 事 大 
吉 了 ， 这 多 历 害 呀 。 对 初学 者 来 说 ， 这 也 很 不 错 。 有 
人 说 没有 比 JavaScript 更 好 的 入 门 语言 了 。 

Head First: 但 这 也 是 需要 付出 代价 的 ， 不 是 吗 ? 


JavaScript: 问 得 好 。 我 简单 是 从 易于 上 和 手 的 意义 上 说 
的 。 我 也 很 深奥 ， 最 新 的 现代 编程 结构 应 有 尽 有 。 


比方 说 呢 ? 


JavaScript: 动态 类 型 、 





Head First : 
一 等 国 数 和 闭 包 ， 算 吗 ? 
都 算 ， 不 过 它们 都 是 什么 东西 呢 ? 

只 要 坚持 阅读 本 书 ， 你 就 会 知道 。 

说 点 具体 的 吧 。 

JavaScript: 我 就 说 一 点 。JavaScript 是 针对 动态 Web 
环境 打造 的 ， 在 这 种 激动 人 心 的 环境 中 ， 用 户 与 网 页 
交互 ， 数 据 是 即时 获得 的 ， 还 会 发 生 各 种 各 样 的 事 
件 ， 而 JavaScript 反 映 了 这 种 编程 风格 。 对 JavaScript 有 
更 深入 的 了 解 后 ， 你 就 能 更 好 地 理解 这 一 点 。 

Head First: 听 你 这 样 说 ， 你 是 完美 的 语言 了 ? 
JavaScript ( 泪 流 满面 ) : 你 知道 ， 我 不 像 其 他 大 多 
数 语 言 那样 出 生 在 象牙 塔 。 我 出 身 草 茎 ， 成 败 全 徘 自 
己 ， 必 须 努 力 拼搏 。 虽 然 如 此 ， 我 并 非 完 美 无 缺 ， 也 
有 一 些 “ 缺 点 ”。 

Head First ( 面 带 Barbara Walters@ 式 微笑 ) : 我 们 今 
天 看 到 了 你 不 为 人 知 的 一 面 ， 我 想 改 天 有 必要 再 来 一 
次 访谈 。 离 别 之 际 ， 有 什么 要 说 的 吗 ? 

JavaScript: 不 要 只 看 我 的 缺点 ， 要 了 解 并 坚持 利用 我 
的 优点 。 


Head First: 
JavasScript : 
Head First : 











@D Barbara Walters 是 美国 著名 人 访谈 类 书目 主持 人 ， 
被 誉 为 “美国 电视 新 闻 第 一 夫人 ”。 一 一 编者 注 
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JavaScript 用 于 给 网 页 添加 行 


与 几 年 前 相 比 ， 浏 览 器 引擎 执 
行 JavaScript 代 码 的 速度 快 得 
多 。 


浏 贤 器 在 网 页 中 遇 到 JavaScript 
代码 后 就 开始 执行 它们 。 


使 用 <script> 元 素 在 网 页 中 
添加 JavaScript 代 码 。 


可 在 网 页 中 内 藤 JavaScript 代 
码 ， 也 可 在 HTML 中 链接 到 包含 
JavaScript 代 码 的 独立 文件 。 


要 链接 到 独立 的 JavaScript 文 
件 ， 可 在 <script> 标 签 中 使 
用 特性 src。 


HTML 声 明 网 页 的 结构 和 内 
容 ，JavaScript 计 算 值 并 给 网 页 
添加 行为 。 


Javascript 程 序 由 一 系列 语句 组 
成 。 

变量 声明 语句 是 最 常见 的 
JavasScript 语 句 之 一 ， 它 使 用 关 
键 字 var 来 声明 新 变量 ， 并 使 
用 赋值 运算 符 = 给 变量 赋值 。 


JavaScript 变 量 的 命名 规则 和 指 
南 只 有 几 条 ， 遵 循 它们 至 关 重 
要 。 

给 变量 命名 时 于 万 不 要 使 用 关 
键 字 。 


JavaScript 表 达 式 计算 值 。 


三 种 弟 见 的 表达 式 是 数字 表达 
式 、 字 符 串 表达 式 和 布尔 表达 
起 。 


if/else 语 句 让 你 能 够 在 代码 
中 作出 决策 。 
while/for 语 句 让 你 能 够 通过 
循环 多 次 执行 代码 。 

使 用 console.1og (而 不 是 
alert) 将 消息 显示 到 控制 合 。 


控制 合 消息 应 该 只 用 于 调试 ， 
因为 用 户 很 可 能 根本 看 不 到 探 
制 合 消息 。 

JavaScript 最 常用 于 给 网 页 添 
加 行为 ， 但 也 用 于 在 Adobe 
Photoshop、OpenOffice 和 和 
Google Apps 等 应 用 程序 中 编写 
脚本 ， 甚 至 被 用 作 服 务 器 靖 编 


程 语 二 O 


ey 


JavaScript 速 览 


JavaScript 填 字 游 戏 





全 处 于 松弛 状态 。 


JavaScrhipt 炉 和 字 游 戏 


来 玩 一 个 填 字 游戏 " ， 放 松 一 


下 心情 ， 让 你 的 神经 完 


- 国 


全 醒 硬 丁丁 丁丁 本 


| | | | | 本 


晤 本 面 本 本 本 醒 本 
呈 醒 古本 本 本 丁丁 本 


呈 面 面 面 本 醒 丁丁 古本 


横 回 


2. 在 HTML 中 链接 到 外 部 JavaScript 文 件 时 ， 需 要 在 
<script> 元 素 中 指定 的 特性 。 


6. 为 避免 难堪 的 命名 错误 而 使 用 的 拼写 方式 。 
7. JavaScript 给 网 页 添加 的 东西 。 
10. 前 面 例子 中 用 到 的 啤酒 的 计量 单位 (复数 形式 ) 。 
13. 表示 一 行 JavaScript 代 码 。 
14. 3 + 4 所 属 的 JavaScript 语 言 结构 。 
15. 所 有 JavaScript 语 句 都 以 它 结束 。 
16. 用 于 调试 JavaScript 代 码 的 函数 。 
@D 本 书 中 的 填 字 游戏 均 为 填写 英语 单词 。 一 一 编者 注 


38 第 1 章 





靖国 国 


1. 一 种 用 于 在 JavaScript 程 序 中 重复 执行 操作 的 循环 。 
3. JavaScript 变 量 名 是 区 分 什么 的 ? 

4. 声明 变量 时 使 用 的 关键 字 。 

.变量 存储 的 东西 。 

6. 每 次 执行 循环 时 ， 都 要 判断 的 一 个 表达 式 。 

. 当今 JavaScript 的 运行 速度 比 以 前 更 快 还 是 更 慢 ? 
9. if/else 语 句 的 用 途 。 

11. 可 使 用 + 运算 符 将 什么 拼接 起 来 ? 

12. 用 于 放置 JavaScript 代 码 的 元 素 。 


Un 


OO 


ey 


JavaScript 速 览 


ps So MEE DI fr 2 
这 身 浏览 器 管 案 
agp 下 面 的 JavaScript 代 碚 存在 一 些 错 误 。 你 
8 的 任务 是 突 身 济 宽 器 ， 将 其 中 的 檬 误 闭 
EE 出 米 。 党 成 泛 个 练习 后 ， 涝 勒 到 木 章 灶 
二 ” 尾 ， 顷 大 你 是 否 找 出 了 所 有 的 错 演 。 痊 
案 如 下 。 








将 字符 串 括 起 时 ， 去 么 使 用 两 个 双 引 号 (") ， 
么 使 用 两 个 单 引 号 () 。 不 要 旭 用 。 


到 
// 笑话 测试 。 
除非 需要 指定 的 是 字符 串 ， 人 否则 不 受 


var Joke = "JavaScript walked Into a bar....'; 用 引号 将 布尔 值 括 起 


Var toldJoke = "false"; 


var $spunchline = 可 以 使 用 以 $$ 打头 的 变量 9 但 不 建议 这 样 做 。 


"Better watch out for those semi-colons." 皮 习 别 后 了 在 语句 末尾 诺 加 分 号 | 
var %entage = 20; 人 变量 名 中 不 能 使 用 %。 


Var result 和 \ 也 是 在 末尾 调 泥 了 分 号 


NSo 


if (toldJoke == true) { 电 区 分 大 小 写 的 
Java5cript 定 区 分 六 小 与 鸭 ， 
Alert($punchline); 人 、 
wp | 应 为 alert 而 不 是 Alert。 
} else 加 
三 
alert(joke):; 到 痛 了 一 个 左 花 括号 。 


证 平 又 人、 < 时 头 
\\ 电影 之 夜 ~ 注释 应 以 // 而 不 是 \\ 打 关 


人 让 忆 今 安 
var zip code = 98104; 变量 名 不 能 包含 宇 格 。 线 、、 但 指定 字符 串 Forbidden 


var Joe'sFavoriteMovie = Forbidden Planet; 变量 名 不 能 Planet 时 ， 必 须 用 引号 
WF 包含 引号 
var movieTickets$ -= 9; a 括 起 。 
if (movieTicket$ >= 9) { 
alert("Too much!'"); 
} else { 由 于 变量 名 非法 ， 这 条 if/else 语 


句 不 管用 。 


alert("We're going to see " + JjJoe'sFavoriteMovie); 
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练习 答案 


请 拿 起 笔 来 ， 将 一 些 表达 式 的 作用 搞 清 楚 。 计 算 下 面 每 个 表达 式 的 值 并 写 下 来 。 是 的 ， 写 下 来 。 
将 老 妈 对 你 不 要 在 书 上 乱 写 乱 男 的 嘱 只 和 均 了 吧 ， 在 本 书 中 想 怎么 写 就 怎么 写 ! 一 定 对 照 本 章 末 
尾 的 答案 ， 看 看 你 的 答案 对 不 对 。 答 案 如 下 。 

人 an 


1 





(9 / 5) * temp + 32 如 果 temp 为 10， 结 果 是 什么 ? _50_ 
这 是 一 个 布尔 表达 式 。 运 算 符 == 判 
| 
如 果 color 的 值 为 "pink"， 这 个 表达 式 为 true 
Color == "orange" 还 是 false? _ false 


如 果 color 的 值 为 "orange" 昵 ? _true 


name + ", " + "you've won!" 如 果 name 的 值 为 "Martha"， 结 果 是 什么 ? 


这 个 运算 符 判 断 第 一 个 值 是 。 -一 Martha, youve wonl 
否 大 于 第 二 个 值 。 你 也 可 以 


yourLevel > 5 使 用 >= 来 判断 第 一 个 值 是 如 果 yourLevel 的 值 为 2， 结 果 是 什么 ? _false 
否 大 于 或 等 于 第 一 个 值 。 如 果 yourLevel 的 值 为 5， 结 果 是 什么 ?_false 





如 果 yourLevel 的 值 为 7， 结 果 是 什么 ? _true 


(level * points) + bonus 假设 level 的 值 为 5，points 的 值 为 30000， 
bonus 的 值 为 3300， 结 果 是 什么 ? _153300 


color != "orange" 如 果 color 的 值 为 "pink"， 这 个 表达 式 为 true 
还 是 false? _ true 





运算 符 != 判 断 两 个 值 是 否 不 相等 。 , 





编码 技巧 


Fess 
你 注意 到 了 吗 ? 运算 符 = 用 于 赋 
1000 wiogn 会 不 会 有 多 个 答案 呢 ? 只 有 一 个 信 ， 而 运算 符 == 用 于 判断 相等 性 、 也 就 
正确 答案 。 你 的 答案 是 什么 ? 是 说 ， 给 变量 赋值 时 使 用 一 个 等 扎 ， 当 
“1000108” 断 两 个 值 是 否 相等 时 使 用 两 个 等 号 


种 常见 的 编码 错误 是 ， 该 使 用 其 a 


运 异 付 时 使 用 了 另 一 个 ， 
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HA 
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代 碚 冰箱 贴 管 案 


有 一 个 JavaScript 程 序 的 代码 被 随机 地 贴 在 冰箱 上 。 你 能 将 这 些 冰箱 贴 放 到 正确 的 位 置 上 ， 
组 成 一 个 生成 如 下 输出 的 Javascript 程 序 吗 ? 请 对 照 本 章 末 尾 的 答案 ， 再 继续 往 下 阅读 。 答 
案 如 下 。 





正确 排列 后 的 冰箱 贴 ! 


v 


var name = "Joe"; 


while (i < 2) { 


document .write("Happy Birthday to you.<br>"); 






document.write("Happy Birthday dear " + name + " <br>"); 


document .write("Happy Birthday to you.<br>") 


. 
r 


正确 地 排列 这 些 冰箱 贴 后 ， 组 
成 的 程序 将 生成 如 下 输出 。 





OA | | Happy Birthday x 34 





全 GC 全 | DD localhost/~Beth/HFJS/chapterl/birthday.html sm »| 





Happy Birthday to you. 
Happy Birthday to you. 
Happy Birthday dear Joe, 
Happy Birthday to you. 
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六 + 

和 
” 等 党 

揭 下 它们 的 面具 ， 将 右边 的 描述 与 左边 


[AL 
小 月 E 


所 有 的 交流 方法 都 戴 着 面具 来 参加 晚会 了 。 
的 名 称 正确 地 搭配 起 来 吗 ? 我们 已 经 将 一 种 交流 方法 与 其 换 述 搭配 起 来 了 。 管 案 如 下 。 
我 让 用 户 停止 前 进 的 步伐 ， 并 问 他 传递 一 条 简短 的 
米 续 前 行 。 


消息 。 用 户 必须 单 击 OK 按钮 才能 继续 前 


我 能 够 在 文档 中 插入 少量 的 HTML 和 文本 。 我 虽然 
不 是 癌 用 户 传递 消息 的 最 佳 方式 ， 但 在 所 有 浏览 中 






document.write 


console.log 
中 都 管用 。 
使 用 我 可 以 全 面 控制 网 页 : 获取 用 户 输入 的 值 ， 修 改 


HTML 或 样式 ， 更 新 网 页 的 内 容 。 


alert 


只 是 一 种 简单 的 调试 工具 。 使 用 我 可 将 信息 写 入 


文档 对 象 模型 5 
开发 人 员 专 用 的 控制 台 。 


2 编写 代码 


切 ! 你 要 
我 已 经 编写 了 一 点 点 交往 ， 就 
JavaSeript 代 码 。 pm 部 代码 编号 


你 已 经 知道 了 变量 、 类 型 、 表 达 式 等 ， 我 们 接着 往 下 介绍 。 
你 对 JavaScript 有 所 了 解 ， 实 际 上 已 经 具备 了 足够 的 知识 ， 可 以 编写 一 些 
真正 的 代码 了 : 一 些 完成 有 趣 功 能 的 代码 ， 一 些 有 人 想 使 用 的 代码 。 你 
缺乏 的 是 实际 编写 代码 的 经 验 ， 现 在 就 来 弥补 吧 。 如 何 弥 补 呢 ”全 里 心 
地 投入 ， 开 发 一 个 完全 使 用 JavaScript 编 写 的 休闲 类 游戏 。 我 们 目标 远 
大 ， 又 脚踏实地 ， 一 步 一 个 脚印 。 来 吧 ， 现 在 就 开始 。 如 末 你 想 利 用 这 
款 游戏 来 一 次 创业 ， 我 们 不 会 有 任何 意见 ， 因 为 代码 是 你 的 。 











开发 一 款 战舰 游戏 


> 也 » vip 
开发 一 款 战 舰 游 戏 
你 将 充当 六 览 给 的 对 手 : 训 览 右 将 战舰 隐藏 起 
来 ， 你 的 任务 是 找到 并 击 沉 这 些 战 舰 。 当 然 ， 不 
同 于 真正 的 战舰 游戏 ， 在 这 款 游 戏 中 ， 你 并 没有 
自己 的 战舰 。 你 的 目标 是 通过 尽 可 能 少 的 猿 测 次 
数 将 讲 览 瞪 的 战舰 全 部 击 沉 。 
目标 : 通过 尽 可 能 少 的 猜测 次 数 将 讲 览 颖 的 战舰 
全 部 击 沉 。 将 根据 你 的 表现 给 你 打分 。 


准备 工作 : 这 个 游戏 局 动 时 ， 计 算 机 将 战舰 放 在 
一 个 虚拟 网 格 中 。 然 后 ， 游 戏 将 让 你 进行 第 一 次 
青 测 。 


玩法 : 浏览 如 将 提示 你 猜测 位 置 ， 然 后 你 输入 网 
格 位 置 。 你 猜测 后 ， 将 显示 结果 Hit、Miss 或 You 
sank my battleship!。 所 有 战舰 都 被 击 沉 后 ， 游 戏 
结束 并 显示 你 的 得 分 。 


第 一 次 尝试 
Fs/ A > vr y 

加 化 的 战舰 游戏 
完整 版 使 用 7x7 网 格 ， 有 三 艘 战舰， 但 这 里 将 纺 
写 一 个 更 人 简单 的 版 本 : 使 用 1 x 7 网 格 ， 只 有 一 艘 
战舰 。 这 有 点 粗糙 ， 但 我 们 的 重点 是 设计 游戏 的 
基本 代码 ， 而 不 是 满足 感官 ， 至 少 现在 如 此 。 


不 用 担心 ， 通 过 从 这 个 游戏 的 简化 版 着 手 ， 将 
为 后 面 编写 完整 版 打下 坚实 的 基础 。 这 也 提供 
了 足够 多 的 难题 ， 让 我 们 有 机 会 在 第 一 个 真正 的 
JavaScript 程 序 (当然 ， 第 1 章 那 个 正式 的 商务 应 用 
程序 不 算 ) 中 解决 。 因 此 ， 本 章 将 创建 这 个 游戏 
的 向 化 版 ， 等 你 学 习 到 更 多 的 JavaScript 知 识 后 再 
创建 其 暴 华 版 。 
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我 们 的 努力 目标 如 下 : 一 个 漂亮 的 7xX7 网 
格 ， 其 中 包含 三 人 艘 目标 战 靓 。 我 们 将 从 更 
简单 的 版 本 着 手 ， 等 你 对 JavaScript 有 更 诬 
入 的 了 解 后 ， 再 添加 图 形 和 其 他 内 容 ， 让 
游戏 与 议 里 显示 的 完全 一 样 。 我 们 将 把 闵 


加 音效 的 任务 留 给 你 去 完成 。 


不 使 用 上 面 所 示 的 7x7 网 格 ， 我 们 将 从 1x7 
C 网 格 着 手 。 另 外 ， 我 们 暂时 只 考虑 一 稻 战 舰 。 





A 1 A NM 4 
从 高 层次 设计 着 手 
我 们 知道 ， 我 们 需要 一 些 变量 、 数 字 和 字符 串 ， 还 需要 
if 语 句 、 条 件 测试 和 循环 等 ， 但 在 什么 地 方 需要 、 需 要 
多 少 呢 ? 如 何 将 这 些 整 合 起 来 呢 ? 要 回答 这 些 问题 ， 我 
们 需要 更 详细 地 了 解 这 款 游戏 的 功能 ， 
首先 ， 需 要 清楚 这 款 游戏 的 大 致 流程 。 基 本 情况 如 下 。 





@ 用 户 启动 游戏 


O 游戏 将 一 般 战 舰 随机 地 放 在 网 
格 中 。 





开始 玩 游 戏 
重复 下 面 的 步骤 ， 直 到 战舰 被 击 沉 。 


(© 





提示 图 户 猜 测 一 个 位 置 
(2、0 等 ) 


将 图 户 猜测 的 位 置 与 战舰 的 
位 置 进行 比较 ， 确 足 结果 是 
击 中 、 未 击 中 还 是 击 沉 。 





游戏 结 


根据 猜测 次 数 给 国 户 打分 。 





日 


对 游戏 需要 完成 的 任务 有 大 致 了 解 后 ， 接 下 来 需 
要 了 解 这 些 步 又 的 更 多 细 市 。 


将 战舰 标记 
未 被 击 帝 





编写 代码 
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设计 游戏 


更 多 细节 


我 们 有 了 高 层次 设计 和 专业 级 流程 图 ， 对 


这 款 游戏 的 工作 原理 有 了 非常 深入 的 认识 ， 游戏 启动 。 创 建 一 稻 战 舰 ， 并 指定 它 在 排列 

但 开始 编码 前 ， 还 需要 厘清 其 他 一 些 细节 。 成 一 行 的 7 个 单元 格 中 占据 哪 三 个 单元 格 。 
这 些 单元 格 是 使 用 整数 表示 的 。 例 如 ，1、2 

表示 战舰 和 3 表示 战舰 占据 了 如 下 图 所 示 的 单元 格 : 


首先 ， 需 要 确定 如 何 表 示 网 格 中 的 战舰 。 
别 忘 了 ， 这 个 网 格 是 虚拟 的 ， 它 并 不 存在 于 
这 个 程序 中 。 只 要 用 户 和 游戏 知道 战舰 隐 
藏 在 网 格 中 3 个 连续 的 单元 格 内 就 行 〈 单 元 
格 的 编写 从 和 零 开 始 ) ， 在 代码 中 并 不 需要 
将 网 格 本 里 表示 出 来 。 你 可 能 想 创建 存储 
全 部 7 个 单元 格 的 东西 ， 再 将 战舰 放置 到 这 
些 位 置 。 但 实际 上 不 需要 这 样 做 ， 只 需 知 
道 战舰 在 哪些 单元 格 〈 如 单元 格 1~3) 中 














国人 
0 1 2 3 


4 7 6 





3》 游戏 开始 。 提 示 用 户 进 行 猜测 


Ready, aim, fire! (enter a number from 0-6): 


OO 和 @ The page at localhost says: 











有 可 。 | Cancel | [一 Gx 一 站 

> fA 检查 用 户 的 输入 是 否 是 战舰 占据 的 三 个 单 
多 取 周 户 竹 © 元 格 之 一 。 在 一 个 变量 中 记录 击 中 次 数 。 

如 何 获取 用 户 输入 呢 ? 可 使 用 prompt 函 数 。 

每 当 需 要 让 用 户 猜测 位 置 时 ， 我 们 都 使 用 战舰 的 3 个 位 置 都 被 击 中 且 击 中 次 数 为 3 时 
prompt 来 显示 一 条 消息 ， 并 从 用 户 那 里 获 游戏 结束 。 告 诉 用 户 他 猜测 了 多 少 次 才 将 

取 输 入 (一 个 0 一 6 的 数字 ) 。 成 舰 击 况 。 

显示 结果 游戏 与 图 户 之 关 的 交互 

如 何 显示 输出 呢 ? 就 现在 而 言 ， 我 们 将 继 SY Dee 人 
续 使 用 alert 来 显示 游戏 的 输出 。 这 虽然 Ra 
略 显 简陋 ， 但 确实 管用 〈 本 书后 面 编写 真 Play battleship! 

正 的 游戏 时 ， 将 更 新 网 页 ， 但 在 此 之 前 ， 

我 们 还 有 一 段 路 要 走 ) 。 © 二 一 一 





1 


(Cancel |] OK 


OK 


编写 伪 代 码 


我 们 需要 一 种 规划 和 编写 代码 的 方法 。 首 先 来 编写 伪 代 码 (pseudocode) 。 伪 代 
码 介 于 JavaScript 代 码 和 程序 的 自然 语言 搬 述 之 间 。 你 将 看 到 ， 它 让 我 们 无 需 编写 
实际 代码 就 能 彻底 弄 清 楚 程 序 的 运行 过 程 。 

下 面 的 伪 代 码 由 两 部 分 组 成 ， 第 一 部 分 描述 了 我 们 需要 的 变量 ， 而 第 二 部 分 摘 述 
了 程序 的 逻辑 。 变 量 指出 了 要 在 代码 中 记录 哪些 东西 ， 而 逻辑 指出 了 要 创建 这 个 
游戏 必须 如 实地 实现 哪些 代码 。 











































































































人 这 些 变 量 命 lorsationl. 





< 
Ct 














声明 三 个 变量 ， 用 于 仔 傅 成 其 


omatiogn2n loeationds 











































































































我 们 需要 的 变量 


< 一 





















































声明 一 个 仓 傅 用 户 猜 测 的 变量 ， 将 员 合 名 为 guess。 


声明 一 个 和 存 依 击 中 次 数 的 变量 ， 将 只 命名 为 hits 关 初始 化 为 0。 
























































































































































人 入 guesses 并 初始 化 为 0。 


到 
| 
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] 
训 
3 
LS 
网 
dl 
I 
3> 
入 
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声明 一 个 记录 战 肌 是 否 锯 击 涡 的 变量 ， 将 员 命 名 为 1sSunk 并 初始 化 为 false。 




























































































循环 : 只 要 战舰 未 被 击 沉 
获取 用 户 的 猜测 
将 用 户 输入 与 有 效 的 输入 值 进行 比较 
如 果 用 户 的 猜测 无 效 


获 显 示 让 用 户 输入 有 效 的 数字 












































下 面 是 游戏 的 钦 辑 。 












































































































































































































































让 


































































































































































































































































































否则 
将 猜测 次 数 加 
如 果 用 户 猜 测 的 是 战舰 占据 的 位 置 z 
就 将 击 中 次 数 加 1 有 
本 这 不 是 Java5Script 代 码 ， 但 你 
RR 可 能 已 经 知道 如 何 使 用 代码 实 
项 将 isSunk 设 置 为 true 现 这 种 逻辑 了 。 
并 向 用 户 显 示 YoU sank my battleshipl 
如 果 到 此 结束 
如 果 到 此 结束 \ 
+ 则 到 此 结 、 本 
人 注意 ， 这 里 使 用 了 缩 进 让 伪 代 码 更 容 多 
循环 到 此 结束 理解 。 在 实际 代码 中 ， 我 们 也 会 这 样 做 。 





















































各 用 尸 显 示 统 计 信 息 
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战舰 练习 


人 和 磨 笔 上 阵 
NS 





假设 我 们 的 虚拟 网 格 类 似 于 下 面 这 样 : 





locationl 
location2 


location3 


2 3 4 5 6 
并 像 下 面 这 样 使 用 了 位 置 变量 来 指出 战舰 的 位 置 : 
3; 


4; 


号 


而 用 户 的 输入 序列 如 下 : 
1, 4, 2, 3, 5 
在 给 定 上 述 用户 输 入 的 情况 下 ， 前 一 页 的 伪 代 码 将 如 何 执行 呢 ? 请 将 你 认为 的 


结果 与 在 下 面 。 我 们 指出 了 开始 时 的 情况 。 如 果 这 是 你 第 一 次 演练 伪 代 码 的 运 
行 过 程 ， 请 花 点 时 间 彻 底 弄 清楚 其 工作 原理 。 


location1 location2 location3 guess guesses hits 
3 4 7 一 一 一 0 0 
3 4 7 1 1 0 


第 一 行列 出 了 用 户 第 一 次 猜测 之 前 
各 个 变量 的 值 。 我 们 没有 初始 化 变 
时 guess， 因 此 它 的 值 是 未 定义 的 。 


入、 如 果 你 需要 帮助 ， 


可 以 偷 看 一 眼 本 章 
末尾 的 答案 。 


isSunk 


false 


false 


编写 代码 


对 了 ， 别 总 了 HTML 


如 果 没 有 链接 到 JavaScript 代 码 的 HTML， 你 就 走 不 了 多 远 。 新 建 一 
个 文件 ， 将 其 命名 为 battleship.html1， 并 输入 下 面 的 标记 。 等 你 编写 
好 这 个 HITML 文 件 后 ， 我 们 将 回 过 头 去 编写 JavaScript 代 码 。 





3 级 简 : 们 只 是 需要 一 个 链 
成 舰 游戏 的 HTML 超 级 简单 。 我 们 只 生生 
接 到 JavaScript 代 码 的 网 内 ， 而 所 有 的 操作 都 是 在 


<lIldoct html> 和 A 
0 JavaScript 代 码 中 完成 的 。 


<html lang="en"> 





<head> 
@Oe [7 Battleshi x 机 
<title>Battleship</title> ie ”i 二 
€ | localhost/~Beth/HFJS/chapter5... | > 三 
<meta charset="utf-8"> 
</head> 也 lay battleship! 


<body> 
<hl>Play battleship!'</h1> 
<script src="battleship.js"></script> 
</body> 
</html> ， 
我 们 在 这 个 网 页 的 <body> 元 素 末 尾 链 接 到 
JavaScript 代 码 ， 因 此 等 浏览 器 开始 执行 
battleshipjs 中 的 代码 时 ， 网 页 己 加 载 完毕 。 


(rr 我 
们 需要 编写 一 些 实现 游戏 的 代码 | 


ge 


集中 精神 。 


虽然 有 点 超前 ， 但 请 你 思考 下 列 问题 : 加 载 网 页 时 ， 为 随机 选择 战舰 占据 的 单元 格 ， 你 
认为 需要 什么 样 的 代码 呢 ? 为 正确 地 放置 战 岗 ， 需 要 考虑 哪些 因素 呢 ? 将 你 的 想法 写 在 
下 面 。 
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编写 游戏 代码 


编写 人 简单 的 战舰 代码 


我 们 将 以 伪 代 码 为 监 本 ， 编 写实 际 的 JavaScript 代 码 。 
首先 ， 来 处 理 需要 的 所 有 变量 。 再 来 看 一 有 眼 伪 代码 ， 搞 























































































































































































































































































































































































































清楚 需要 的 变量 。 我 们 需要 三 个 受 量 
来 存储 战舰 的 位 置 。 
声明 三 个 变量 ， 用 于 存储 战舰 占据 的 各 个 单元 格 。 2 
将 这 些 委 量 命 名 为 locationl、location2 不 
looat1lionds 
声 日 一 个 人 存 使 - 吉 汕 | 4 亦 - 号 站 上 -全 、 J ESSo 、 
声明 一 个 存 依 用 户 猜 测 的 变量 ， 将 其 命名 为 gu 还 需要 另外 三 个 恋 晶 
声明 一 个 存储 击 中 次 数 的 变量 ， 将 其 命名 为 hits 卉 (guess、 hits 和 guesses) 
初始 化 为 0。 来 处 理 用 户 的 猜测 。 
































声明 一 个 存储 猿 测 次 数 的 变量 ， 将 其 命名 为 
guesses 并 初始 化 为 0。 







































































六 


ee 

TZ 
声明 一 个 记录 战舰 是 否 被 击 沉 的 变量 ， 将 其 命名 为 ,战舰 是 否 被 击 训 。 
ijsSunk 并 初始 化 为 false。 4 






































































































































下 面 在 一 个 JavaScript 文 件 中 创建 这 些 变 量 。 新 建 一 个 文 
件 ， 将 其 命名 为 battleship.js， 并 输入 如 下 变量 再 明 。 


变量 。 我 们 暂时 将 战舰 的 


这 是 三 个 位 
var Locationl = 3; 位 置 设置 为 3、 4 和 5。 
var location2 = 4; 从。 后面 将 回 过 头 来 编写 一 些 代码 ， 它 们 生成 
var location3 = 5; 随机 的 战舰 位 置 ， 让 用 户 更 难 找到 。 


用 户 猜 测 前 ， 变 量 guess 没 有 值 ， 因 此 是 
一 未 定义 的 。 
var guess; 






var hits = 0; = i 
var guesses = 0; 我 们 将 变量 hits 和 编码 技巧 
Cs guesses 的 初始 值 都 设 
时 为 0， 如 果 你 没有 给 变量 指定 初始 





值 ， JavaScript 将 给 它 指定 
默认 值 undefined， JavaScript 使 用 
undefinegd 来 指出 还 没有 给 变量 赋值 ， 
本 书后 面 将 更 详细 地 讨论 ungdefiney 
和 其 他 古怪 的 值 。 


var isSunk = falLse， 


\ 最 后 ， 设 置 变 量 isSunk 的 初始 值 为 


false。 用 户 击 识 战 租 后 ， 我 们 将 把 


这 个 变量 设置 为 true。 








编写 代码 


Sr Y py 2 
编写 游戏 多 名 
声明 好 变量 后 ， 下 面 来 次 入 挖掘 实现 游戏 逻辑 的 伪 代 码 。 我 们 
将 把 这 些 伪 代码 分 为 几 部 分 。 你 首先 要 做 的 是 实现 循环 : 它 需 
要 不 断 循 环 ， 直 到 战舰 被 击 沉 ， 接 下 来 ， 获 取 用 户 的 猜测 并 验 
采 它 是 0 一 6 的 数字 ;， 然后， 编写 检查 战舰 


第 1 步 : 创建 循环 ， 获 


证 它 是 否 有 效 ， 即 确 人 
DD 
取 并 验证 用 户 输入 


末 它 
是 否 被 击 中 以 及 是 否 被 击 沉 的 逻辑 ， 最 后 ， 问 用户 报告 ， 指 出 
他 猜测 了 多 少 次 才 将 战舰 击 沉 。 


第 2 步 : 检查 猜测 的 位 置 ， 
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循环 : 只 要 战舰 未 被 击 沉 
获取 用 户 的 狂 测 
将 用 户 输入 与 有 效 的 输入 全 进行 比较 
如 果 用 户 的 猜测 无 效 
融 显示 让 用 户 输 入 有 效 的 数字 
否则 
Li 确定 1 一 
0 定 有 没有 击 中 战 秽 
将 猜测 次 数 加 
如 果 用 户 猜 测 的 是 成 舰 占 据 的 位 置 
束 将 击 中 次 数 加 11 
ey 第 35 步 : 检查 战 
a ~ 钢 是 否 被 击 议 
束 将 issunk 设 置 为 true 
省 向 用 户 显 示 You sank my battleshipo! 
如 果 到 此 结束 
第 4 步 : 处 理 要 向 用 


如 果 到 此 结束 
如 果 到 此 结束 
pg 户 显示 的 最 终 消 虫 


循环 到 此 结束 
"显示 统计 信 










































































器 用 
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游戏 输入 循环 


第 YY 步 。 他 | 建 鼻 环 车 获 取 给 入 创建 循环 并 获取 图 户 的 输入 


检查 同 户 的 猜测 


下 面 来 将 游戏 逻辑 转换 为 实际 的 JavaScript 代 码 。JavaScript 代 码 和 伪 代 码 之 间 并 检查 战舰 是 和 被 击 沉 
不 是 完全 对 应 的 ， 因 此 在 有 些 地 方 必须 进行 调整 。 伪 代码 让 我 们 很 清楚 需要 做 向 膨 户 显示 统计 信息 
什么 ， 现 在 我 们 必须 编写 JavaScript 代 码 ， 以 解决 如 何 做 的 问题 。 


先 来 看 看 到 目前 为 止 已 编写 的 全 部 代码 ， 然 后 将 注意 力 聚焦 于 要 添加 的 代码 上 
(这 样 可 市 省 纸张 ， 如 果 你 阅读 的 是 电子 版 ， 市 省 的 束 是 电能 ) 。 








~ 这 些 己 经 介绍 过 ， 这 里 包含 
它们 只 是 出 于 完整 性 考虑 。 
声明 变量 var Locationl = 3; 
var location2 = 4; 
1 tion3 = 5; < > ~ 中 
ee 循环 从 这 里 开始 。 只 要 战 秽 未 被 击 记 ， 
Var guess; 游戏 就 不 会 结束 ， 因此 继续 循环 。 
var hits = 0; 
var guesses = 0; 前 面 说 过 ， while 语 句 使 用 条 
var isSunk = false; 试 来 决定 是 否 继续 御 环 。 在 这 


里 ， 我 们 通过 检查 确 认 isSunk 仍 为 


一 false。 一 旦 战舰 被 击 训 ， 就 会 将 
循环 : 只 要 战舰 未 被 while (isSunk == false) { pi ee 
击 沉 






































获取 及 ] 猜 济 guess = prompt("Ready, aim, fire! (enter a number 0-6):"); 




















每 次 循环 时 ， 都 让 用 户 进行 猜 


} 测 。 为 此 ， 我 们 使 用 了 内 置 函 
数 prompt， 下 一 页 将 更 详细 地 
介绍 这 个 函数 。 
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Prompt 的 工作 原理 


放 览 器 提供 了 一 个 内 置 函数 ， 可 以 用 来 获取 用 户 输 入 ; 这 个 函数 就 是 prompt。 

冰 数 prompt 与 你 使 用 过 的 函数 alert 很 像 ( 它 也 显示 一 个 对 话 框 ， 其 中 包含 你 
指定 的 字符 串 ) ， 但 它 还 提供 了 让 用 户 输 入 啊 应 的 区 域 。 这 种 响应 将 作为 函数 调 
用 结果 以 字符 串 的 形式 返回 ， 如 果 用 户 取 消 了 对 话 框 或 没有 输入 任何 响应 ， 返 回 
有 的 将 是 null。 








包 


本 一 


将 函数 prompt 的 结果 赋 给 变 重 


( guess。 


guess = prompt("Ready, aim, fire! (enter a number 0-6):"); 


\, 给 区 数 prompt 提 供 一 个 字 


符 串 ， 作 为 向 用 户 发 出 的 
鸭 数 prompt 的 职责 是 从 用 户 那里 获取 es 
输入 。 这 通常 是 使 用 对 话 框 实现 的 。 








RR : : 
tady, aim, firel (enter a ngmber from 0-6): 








从 用 户 那 里 获取 输入 后 ， 范 数 prompt 立 即将 输入 返回 给 你 的 
代码 。 在 这 里 ， 输 入 (一 个 字符 串 ) 被 赋 给 变量 guess。 


你 现在 可 能 想 尝 试 运行 这 些 代码 ， 但 千 万 不 要 这 样 做 。 


MT 如 果 你 这 样 做 ， 浏 览 器 将 开始 一 个 无 限 循 环 ， 不 断 地 让 你 猜测 。 除 非 让 操作 系统 强 
和 行 停止 浏览 器 进程 ， 否 则 根本 没 法 停止 这 个 循环 。 


II 


编写 代码 


ee 





你 现在 的 位 置 ， 
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验证 用 户 输入 


> y 
人 查 日 PP 的 狂 ny [NM 创建 循环 并 获取 辕 户 的 输入 


[ ] 检查 周 户 的 猜测 





从 伪 代 码 可 知 ， 要 检查 用 户 的 猜测 ， 首 先 需要 确认 用 户 的 输入 有 效 ， 如 果 有 效 ， 就 | 加 检查 战舰 是 否 诈 击 沉 
检查 是 否 击 中 了 战舰 。 我 们 还 需 相应 地 更 新 变量 guesses 和 hits。 下 面 首先 来 检查 ”| 加 息 网 户 显 示 统 计 信息 
用 户 输入 是 否 有 效 ， 如 果 有 效 ， 就 将 变量 guesses 加 1。 然 后 编写 代码 检查 是 否 击 
中 了 战舰 。 

















// 变量 声明 


while (IsSunk == false) { 
guess = prompt("Ready, aim, fire! (enter a number from 0-6):"); 


if (guess < 0 || guess > 6) { 核实 猜测 的 位 置 是 否 是 0 一 6 
以 检查 用 户 输入 的 有 效 性 。 


alert("Please enter a valid cell number!"); 
} else { 
/A 入 Es 
guesses = guesses + 1; 如 采 输 入 无 效 ， 就 使 用 


有 alert 向 用 户 指出 这 一 点 。 


如 果 输 入 有 效 ， 就 将 guesses 加 1， 
以 记录 用 户 猜 测 了 多 少 次 。 





下 面 详细 地 介绍 一 下 有 效 性 测试 。 你 知道 要 检查 输入 是 否 为 0 一 6， 但 这 个 条 件 到 底 
是 如 何 测 试 这 一 点 的 呢 ?” 下 面 来 详细 解释 。 


这 个 条 件 的 含义 如 下 : 如 果 用 户 的 猜测 小 于 0 或 大 于 6， 
这 个 条 件 就 为 true， 此 时 输入 是 无 效 的 。 


和 


If (guess < 0 || guess > 6) { 
\ 一 
这 个 条 件 实际 上 由 两 个 测试 7 ee 
组 成 ， 其 中 第 一 个 测试 检查 让 合作 o 


guess 是 否 小 于 0， 
这 是 OR 运 算 符 ， 将 两 个 测试 合 而 为 一 ， 使 得 只 
要 有 一 个 测试 为 true， 整 个 条 件 就 为 true。 如 果 
网 个 测试 都 为 false， 则 整个 条 件 为 false; 此 时 
guess 为 0 一 6， 意 味 着 它 是 有 效 的 。 
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昌 关 的 问题 


[e) ， 我 注意 到 函数 prompt 显 示 
的 对 话 框 有 一 个 取消 按钮 。 如 果 
用 户 单 击 该 按钮 ， 函 数 PrompPt 将 
返回 什么 呢 ? 


AAA ，。 

只 ， 如 果 用 户 单 击 这 个 对 话 框 
中 的 取消 按钮 函数 Prompt 将 
返回 null (而 不 是 一 个 字符 串 ) 。 
别 忘 了 ，null 表 示 没 有 值 ; 就 这 
里 而 言 ， 这 是 合适 的 ， 因 为 用 户 
取消 了 而 没有 输入 值 。 我 们 可 利 
用 这 一 点 ， 通 过 检查 返回 值 是 否 
为 null 来 判断 用 户 是 否 单 击 了 取 
消 按 钮 ; 如果 单 击 了 该 按钮 ， 就 


可 以 结束 游戏 。 在 这 里 的 代码 中 ， 
我 们 没有 这 样 做 ， 但 请 务必 牢记 
这 一 点 ， 为 本 书后 面 可 能 这 样 
做 。 


人 Bo] ; 你 说 过 ， 郴 数 pzempt 总 是 
返回 一 个 字符 串 。 既 然 如 此 ， 我 
们 怎么 能 将 字符 串 (如 "0" 或 "6") 
同 数字 (如 0 或 6) 进行 比较 呢 ? 


人 答 ;在 这 种 情况 下 ， 为 了 执 
行 比较 可 记 攻 BE<0 和 和 可 而 区 总 总 交 6， 
0 

0 只 要 用 户 
输入 的 是 数字 (如 4) ，JavaScript 
思 光 二 囊 
(如 "4") 转换 为 数字 。 本 书后 面 将 
更 详细 地 介绍 类 型 转换 这 一 主题 。 


避 s 如 果 用 户 在 prompt 对 话 
框 中 输入 的 不 是 数字 (如 "six"5 
"quit") ， 结 果 将 如 何 呢 ? 


AAA ， 

- 合 "， 在 这 种 情况 下 ，JavaScript 
无 法 将 字符 串 转 换 为 数字 ， 进 而 将 
"six" 或 "quit" 同 6 进行 比较 。 这 
种 比较 的 结果 为 false， 导 致 计 
算 机 认为 未 击 中 战舰 。 在 更 健壮 
ee ee 
地 检查 用 户 输入 ， 确 保 用 户 输 
的 是 数字 。 


[39) : 使 用 OR 运算 符 时 ， 有 一 


个 条 件 为 tr ue 或 两 个 条 件 都 为 
Ws 整个 条 件 就 为 true 吗 ? 
feps 


只 。 是 的 ， 这 两 种 情况 都 为 
true。 使 用 OR 运算 符 (I|) 时 ， 
如 果 有 一 个 条 件 为 true 或 两 个 条 
件 都 为 true， 则 结果 为 true; 如 
果 两 个 条 件 都 为 false， 则 结果 为 


false。 
人 
® 
[9) s 有 AND 运 算 符 吗 ? 


AAA ， 

合 ， 有 ! AND 运 算 符 (&&) 的 
工作 原理 与 OR 运 算 符 类 似 ， 但 仅 
当 两 个 测试 都 为 true 时 ， 结 果 才 
为 tOG 


Wa 
只 。 何 为 无 限 循环 ? 


AAA ， 

吟 ' ， 问 得 好 。 无 限 循环 是 困扰 
程序 员 pd 问题 之 一 。 别 总 了 ， 
循环 兴 须 包含 条 件 测试 ， 而 只 

和 禧 环 测 试 为 true， 御 环 就 继 Py 
如 果 代 三 没有 修改 任何 可 导致 条 件 
测试 最 终 变 为 false 的 因素 ， 和 循环 


将 不 断 进 行 下 去 ， 直 到 终止 浏览 
器 或 重启 计算 机 。 


编写 代码 


运 揭 符 丙 分 名 
学 习 指 南 


布尔 运算 符 用 于 结果 为 true 或 false 
的 布尔 表达 式 中 。 有 两 种 布尔 运算 


布 宁 1 


符 : 比较 运算 符 和 逻辑 运算 符 。 

比较 运算 符 

比较 运算 符 对 两 个 值 进 行 比 较 。 下 

面 是 一 些 常 ee 符 

< ”表示 小 于 

> 表示 大 于 

= 不 SF 于 

=== 表示 正好 等 于 《后 面 将 详细 介 
绍 ) 


<= ”表示 小 于 或 等 于 
>= ”表示 大 于 或 等 于 


逻辑 运算 符 将 两 个 布尔 表达 式 合 而 
一 得 到 一 个 布尔 结 (true 或 
false) 。 下 面 是 两 个 逻辑 运算 符 : 


| ”表示 OR (或 ) 。 只 要 至 少 有 一 个 
表达 式 为 true， 结 果 束 为 true。 


&& 表示 AND (与 ) 。 仅 当 两 个 表达 
式 都 为 true 时 ， 结 果 才 为 true。 


万 胃 NOT， 它 作用 于 


一 个 布尔 表 式 (而 不 是 两 个 ) E 


! 表示 NOT 〈 非 ) 。 仅 当 表 达 式 为 
false 时 ， 结 果 才 为 true。 


判断 是 否 击 中 


浏 断 是 大 击 中 [NA 创建 循环 并 获取 周 户 的 输入 


[|_ ] 检查 周 户 的 猜测 


这 比较 有 趣 : 用 户 猿 测 战 舰 的 位 置 ， 而 我 们 需要 判断 他 是 否 猿 对 了 。 具 体 门 、 检 查 战 舰 是 天 被 者 沉 
地 说 ， 我 们 需要 判断 猿 测 的 位 置 是 否 与 战舰 所 处 的 单元 格 相 同 ， 如 末 相 [| 护 膨 户 显示 统计 信息 





同 ， 就 将 变量 hits 加 1。 


下 面 是 击 中 检测 代码 的 第 一 个 版 本 ， 我 们 来 详细 解释 它 。 


~ 如 果 guess 与 location1 相 


If (guess == locationl1) { 等 ， 说 明 击 中 了 战 和 
be 四 此 将 变量 hits 加 1。 

} else if (guess == location2) { 
hits = hits + 1: K_ 后 

9 避 样 多 E o 

} else if (guess == location3) { 相等 ， 做 同样 的 处 
hits = hits + 1; WA 

} 最 后 ， 如 果 guess 与 location3 相 


等 ， 也 需要 将 变量 hits 加 1。 


1 


如 果 上 述 三 个 条 件 都 不 广 人 人、 注意 到 我 们 在 if/else 代 码 块 中 使 用 
足 ， 就 不 修改 变量 hits， 了 缩 进 。 这 让 代码 更 容易 理解 ， 在 


有 大 量 嵌 套 代码 块 时 尤其 如 此 。 


Ce、 府 和 名 上 隆 
NS 


你 觉得 这 个 版 本 的 击 中 检测 代码 怎么 样 ? 是 不 是 看 起 来 比 需 要 的 复杂 ? 我们 
重复 代码 的 方式 是 否 显 得 有 些 见 余 ? 能 够 对 其 进行 简化 吗 ? 你 能 够 使 用 || 运 
算 符 (布尔 OR 运算 符 ) 的 知识 简化 这 些 代码 吗 ? 继续 往 下 阅读 前 ， 务 必 查 看 
本 章 末 尾 的 答案 。 
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编写 代码 


和 A 


添 ps 击 中 检 由 代 砚 [NA 创建 循环 并 获取 周 户 的 输入 
[检查 网 户 的 铺 


下 面 来 将 前 几 页 的 代码 整合 在 一 起 。 站] 检查 战舰 是 否 被 击 沉 


[| 向 赎 户 显示 统计 信息 





// 变量 声明 


循环 : 只 要 战 while (isSunk == false) { 














































































































































































































拍 未 被 未 沉 
舰 林 被 击 沉 guess = prompt("Ready, aim, fire! (enter a number from 0-6):"); 
和 、 人 考 ~ 川 局 > 
获取 用 J 捕 测 if (guess < 0 || guess > 6) I 《一 检查 用 户 的 猜测 。 
alert("Please enter a valid cell number!"); 

} else { 用 户 的 猜测 是 有 效 的 ， 
将 狂 测 次 数 加 ” guesses = guesses + 1; ce 四 此 将 猜测 次 数 加 1。 
如 果 j 户 狂 测 的 If (guess == locationl || guess == location2 || guess == location3) { 
是 成 舰 们 hits = hits + 1; 失 ”__。 如 果 用 户 猜测 的 是 战 需 位 置 之 一 ， 
将 击 中 次 数 加 11 } 就 将 击 中 计数 器 加 1。 

} 
} 我 们 使 用 | | (OR) 运算 符 将 三 个 条 件 合 而 为 


一 ， 并 将 其 用 于 一 条 if 语句 中 。 这 条 语句 的 含 
义 如 下 : 如 果 guess 等 于 location1、location2 
或 location3， 就 将 hits 加 1。 


你 击 沉 7 了 我 的 战舰 
个 梧 k ， RY 创建 循环 并 获取 膨 户 的 输入 


检查 同 户 的 猜测 


束 要 大 功 各 成 了 了， 整个 游戏 的 逻辑 都 差不多 完成 了 。 再 看 一 眼 伪 检查 战舰 是 下 镍 击 沉 
代码 ， 现 在 需要 做 的 是 检查 战舰 是 否 被 击 中 了 三 次 。 如 末 古 ， [] 自用 疡 显示 统计 信息 
战舰 就 被 击 沉 了， 而 如 琳 战 舰 被 击 沉 ， 束 需要 将 isSunk 设 置 为 
true， 并 将 这 一 点 告诉 用 户 。 下 面 来 编写 这 样 的 代码 ， 再 将 其 整 





合 到 前 面 的 代码 中 。 
自 先 检查 是 否 冉 看 一 眼前 面 的 循环 。 如 果 
/ 中 了 三 次 。 isSunk 为 true， 结 果 将 如 何 呢 ? 
if (hits == 3) { 如 果 击 中 了 三 次 ， 就 < 一 


isSunk = true; < 一 将 isSunk 设 置 为 true。 


alert("You sank my battleship!"); 


”【 
同时 让 用 户 知 道 这 一 点 | 





mn 
名 | 


多 在 的 位 置 ， 57 





通知 用 户 


等 行 。 游戏 后 分 介 配 [多 建 循环 并 获 取 周 户 的 输入 


检查 同 户 的 猜测 


isSunk 设 置 为 true 后 ，whi1le 人 循环 就 会 结束 。 确 实 是 这 样 ， 我 们 熟悉 的 程 友 FA 检查 战舰 是 否 镍 击 沉 
束 要 停止 执行 while 循 环 体 了 ， 不 知 不 觉 间 游戏 束 要 结束 了 。 我 们 还 需 回 用 户 [SHY 后 户 吕 示 统计 信息 
显示 一 些 有 关 其 表现 的 统计 信息 ， 代 码 如 下 。 











var stats = "You took " + guesses + " guesses to sink the battleship, " + 
"which means your shooting accuracy was " + (3/guesses); 
alert(stats); 
我 们 创建 一 个 字符 串 ， 其 中 包含 要 同 用 户 显 示 的 消息 ， 这 和 包括 用 户 
猜测 了 多 少 次 和 射击 精度 。 注 意 ， 为 插入 变 量 guesses 并 分 散 " 
中 ， 这 里 使 用 拼接 运算 符 (+) 将 多 个 部 分 合并 成 一 个 字 付 串 。 
现在 只 需 按 原 样 输入 即 可 ， 稍 后 我 们 将 更 详细 地 解释 这 代 友 


下 面 将 这 些 代码 和 击 沉 检测 代码 与 其 他 代码 整合 起 来 。 


// 变量 声明 


循环 只 要 战舰 while (isSunk == false) { 
























































未 被 击 沉 guess = prompt("Ready, aim, fire! (enter a number from 0-6):"); 
获取 用 户 的 猜测 if (guess < 0 || guess > 6) { 
alert("Please enter a valid cell number!"); 
} else I 











将 猪 测 次 数 加 1 











guesses = guesses + 1; 



























































































































































































































































如 果 户 独 测 3 If (guess == locationl || guess == location2 || guess == location3) 
是 吵 毅 位置 hits = hits + 1; 
将 击 中 次 数 加 人 1 
如 果 击 中 了 3 次 if (hits == 3) { 
将 isSunk 设 置 isSunk = true; 
为 true 
、 _ alert("You sank my battleship!"); 
器用 户 显示 
YOU Sank my } 
battleship! } 
} 
} 
器用 -显示 统 var stats = "You took " + guesses + " guesses to sink the battleship, " + 
计 信 乱 "which means your shooting accuracy was " + (3/guesses); 


alert(stats); 
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编写 代码 





三才 前 面 说 过 ， eh ed ror 实际 上 ， 伪 代码 遗漏 了 一 些 内 容 : 没有 指 
:给 习 - 出 用 户 的 猜测 对 不 对 。 你 能 将 指出 这 一 点 的 代码 插入 正确 的 地 方 吗 ? 


(| 277 


这 是 你 需要 插入 的 代码 。 


// 变量 声明 


while (IsSunk == false) { 


guess = prompt("Ready, aim, fire! (enter a number from 0-6):"); 


If (guess < 0 || guess > 6) { 


alert("Please enter a valid cell number!"); 


} else { 
guesses = guesses + 1; 
If (guess == locationl || guess == location2 || guess == location3) { 


hits = hits + 工 ; 
If (hits == 3) { 
isSunk = true; 


alert("You sank my battleship!'"); 


这 里 有 很 多 右 花 括号 。 如 果 你 无 法 确定 它们 
} CC 各自 对 应 于 哪个 左 花 括号 ， 就 在 书 上 划 线 来 
} 确定 这 一 点 。 
} 


var stats = "You took " + guesses + " guesses to sink the battleship, " + 


"which means your shooting accuracy was " + (3/guesses); 
alert(stats); 








整合 代码 


完 整 的 ch 戏 抱 嫩 [CA 多 建 循环 并 款 取 同 户 的 输入 


检查 周 户 的 猜测 


好 了 ， 我 们 现在 将 伪 代 码 都 转换 为 实际 的 JavaScript 代 码 了 ， 还 发 现 并 补 全 了 伪 代 Kf 检查 战舰 是 否 被 击 沉 
码 遗 漏 的 内 容 。 下 面 是 完整 的 JavaScript 代 码 ， 请 输入 它们 并 存储 到 文件 battleship. 由 用 户 显示 统计 信息 
js 中 。 





Var locationl = 3; 
Var location2 = 4; 
Var location3 = 5; 


var guess; 
var hits = 0; 
var guesses = 0; 


var isSunk = false:; 


while (isSunk == false) { 
guess = prompt("Ready, aim, fire! (enter a number from 0-6):"); 
If (guess < 0 || guess > 6) { 
alert("Please enter a valid cell number!"); 
} else I 


guesses = guesses + 1; 


If (guess == Locationl || guess == location2 || guess == location3) { 
alert("HIT'"); 
hits = hits + 1; 
if (hits == 3) { 
isSunk = true; 
alert("You sank my battleship!"); 
} 
} else { 
alert("MISS"); 


} 


var stats = "You took " + guesses + " guesses to sink the battleship, " + 
"which means your shooting accuracy was " + (3/guesses); 


alert(stats); 


60 


编写 代码 





一 丈 丈 质量 保证 
1 = 


4AUV 4sIUNA 


质量 保证 (quality assurance，QA) 是 指 对 软件 进行 测 

试 以 找 出 其 中 的 缺陷 。 下 面 来 对 这 些 代 码 做 简单 的 测试 。 SS 

准备 就 绪 后 ， 在 训 览 右 中 加 载 battleship.html1， 并 开始 诸 
美 地 运行 还 是 出 现 hn < 


公 尼 /二 


戏 。 尝 试 各 种 不 同 的 操作 。 程 序 能 完 
了 问题 ”如果 出 现 了 问题 ， 请 在 右边 列 出 它们 。 下 面 是 - 


我 们 的 测试 情况 。 
合 预期 的 情况 


如 果 遇 到 不 符合 
或 者 发 现 可 改进 的 地 方 ， 都 
将 它们 粗略 地 记录 下 来 ,。 了 





下 面 是 我 们 与 游戏 交互 的 情况 。 


The page at localhost says: 


The page at localhost says: 
Ready, aim, firel (enter a number from 0-6): | = 首 先 输 入 A 效 
3 3 
数 字 9 > © Please enter a valid cell number! 
OK | 
we OK 


| Cancel | | 
The page at localhost says: 


@ 0-6): at 然 后 输 入 O - 结 果 设 
有 击 中 战 秽 。 ~ © 
(Qe 


0 
| Cancel | OK | 











The page at localhost says: 


然后 输入 0， 结果 没有 
击 中 战 天 O | em HIT! 
The page at localhost says: '- 


The page at localhost says: 
Ready, aim, fire! (enter a number from 0-6): 
3 
| Cancel | | OK | 
人 @ HIT! 
The page at localhost says: 
HIT! 
| 
OK | 


The page at localhost says: 
Ready, aim, firel {enter a number from 0-6): 
4 
| Cancel | | OK PE 
The page at localhost says: 
You sank my battleship! 
[OK 


大 一 第 三 次 击 中 战舰 后 ， 战 舰 


The page at localhost says: 
SS AI 
被 击 识 了 。 
The page at localhost says: 


© Ready, aim, firel (enter a number from 0-6): 
5 
= ~ TY AN “已 让 MA| ~ AI 
KK 我 们 经 过 4 次 猜测 就 击 沉 ~ > 
© You took 4 guesses to sink the battleship, which means your 
0.75 


了 战 观 ， 准 确 率 为 0.75。 
[ok | 











[ Cancel | 





你 现在 的 位 置 ， 


使 用 布尔 运算 符 






对 我 来 说 ， 除 布尔 运算 符 处 ， 
游戏 的 逻辑 非常 清晰 。 布 尔 运 
算 符 只 是 让 我 能 够 将 多 个 条 件 
合 而 为 一 吗 ? 







布尔 运算 符 能 够 让 你 编写 更 复杂 的 逻辑 语句 。 


et a Eee ee 
是 否 为 true。 然 而 ， 有 时 候 需 要 测试 更 复杂 的 条 
件 ， 例 如 : 判断 一 个 值 是 否 大 于 32 且 小 于 100， 判 
灯 一 款 商品 是 否 有 库存 且 在 促销 at 是 
否 在 周二 癌 VIP 顾 客 促销 。 正 如 你 看 到 的 ， 这 些 条 
件 很 复杂 。 


下 面 来 深入 地 了 解 布尔 运算 符 的 工作 原理 。 














假设 要 判断 一 于 商品 是 否 有 库存 且 在 促销 ， 可 这 样 编写 代码 。 


一 首先 ， 检查 这 款 商 品 是 否 有 库存 。 
if (inStock == true) { 
if (onSale == true) { 如 果 有 库存 ， 壬 再 检查 它 是 否 在 促销 。 
// 好像 很 划算 ! 
alert("buy buy buy!"); 如 果 在 促销 ， 就 采取 相 
} 人 应 的 措施 ， 如 买 一 些 ! 
2 请 注意 ， 仅 当 两 个 条 件 都 江 


足 时 ， 才 会 执行 这 行 代码 ! 


可 将 这 两 个 条 件 合 而 为 一 ， 以 简化 上 述 代 码 。 在 简单 战舰 游戏 中 ， 我 
们 检查 guess<0 或 gsuess>6; 而 这 里 我 们 要 判断 的 是 : inStock 为 
true 且 onSale 为 true。 下 面 来 看 看 如 何 将 这 两 个 条 件 合 而 为 一 。 


编写 代码 


这 是 AND 运 算 符 。 使 用 AND 时 ， 仅 当 两 
部 分 都 为 true 时 ， 整 个 条 件 才 为 true。 


、 


if (inStock == true && onSale == true) { 
// 好像 很 划算 ! 人 这 里 的 代码 不 仅 更 简洁 ， 还 更 容易 
理解 。 只 要 将 这 些 代码 与 前 一 页 的 
lert("b b buy!"); 
ee 代码 进行 比较 ， 你 就 能 看 出 来 。 





我 们 还 可 以 更 进一步 ， 以 多 种 方式 组 合 使 用 不 同 的 布尔 运算 符 : 


这 里 在 一 个 条 件 表达 A ee 这 个 条 件 表达 式 的 合 
C 加 果 一 款 商 品 有 库存 ， 且 这 款 商 品 在 促销 或 价格 低 于 60， 和 


if (InStock == 上 true  && (onSale == true || Price < 60)) { 
// 好像 很 划算 | 


alert("buy buy buy'"); 注意 到 这 里 使 用 括号 对 条 件 进 行 了 编组 ， 每 在 先 获 


} 得 OR 运算 的 结果 ， 笛 根据 它 计算 AND 运 算 的 结果 。 


隆 科 上阵 


KC 





下 面 是 一 系列 需要 计算 结果 的 布尔 表达 式 。 请 在 空白 处 填写 你 的 计算 结果 ， 并 查看 本 章 末 尾 的 答案 ， 再 继续 
往 下 阅读 。 


var keyPressed = "N"; 
var temp = 81; . 
var points = 142; 
var willRain = true; 
var level; 
Var humid = (temp > 80 && willRain == true); . 
if (keyPressed == "Y" | 
humid 的 值 是 什么 ? (Points > 100 && points < 200)) { 
level = 2; 
Var guess = 6; } else 1 
var isValid = (guess >= 0 && guess <= 6); level = 1; 
isvalig 的 值 是 什么 ?_ _ } 
var kB = 1287; leve1 的 值 是 什么 ? 


var tooBig = (kB > 1000); 
var urgent = true; 
var sendFile = 


(urgent == true || tooBig == false); 
sendFile 的 值 是 什么 ? 
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布尔 运算 符 练习 


Bob 和 Bill 都 是 会 计 ， 他 们 要 为 公司 网 站 开发 一 个 价格 检 
查 应 用 程序 。 他 们 都 使 用 布尔 表达 式 编 瑟 了 if/else 语 
句 ， 而 且 信心 满 满 ， 认 为 自己 编写 的 代码 正确 无 误 。 哪 
个 会 计 编写 的 代码 是 正确 的 呢 ? 这 两 个 会 计 适 合 从 事 编 
码 工作 吗 ? 请 给 出 你 的 答案 ， 再 查看 本 章 末 尾 的 答案 ， 
然后 继续 往 下 阅读 。 





if (price < 200 || Price > 600) { 
alert("Price is too low or too high! Don't buy the gadget."); 


} else { 
alert("Price is right! Buy the gadget."); 





> 
岛 





If (price >= 200 || price <= 600) { 
alert("Price is right! Buy the gadget."); pil 个 


} else { 
alert("Price is too low or too high! Don't buy the gadget."); 


编写 代码 


别 这 人 么 史 咏 好 不 好 
我 真 不 知道 怎么 说 好 ， 你 在 指定 条 件 时 一 直 都 比较 哆 嗪 。 这 是 什么 意思 呢 ? 
请 看 下 面 的 条 件 ， 


指定 条 件 时 ， 我 们 通常 将 布尔 
变量 与 true 或 false 进 行 比较 。 





if (inStock == true) { 
} 可 in5Stock 就 是 一 个 值 为 true 
或 false 的 布尔 变量 。 





实际 上 ， 这 样 做 有 点 多 余 。 指 定 条 件 时 ， RA F 值 为 true 或 false， 可 布尔 变量 inStock 
就 是 这 样 的 值 。 因 此 ， 不 需要 将 这 个 变量 与 任何 值 进行 比较 ， 可 以 直接 使 用 它 。 换 名 话说 ， 可 将 前 面 


的 代码 修改 成 下 面 这 样 : 


if (inStock) I 《一 仅 使 用 布尔 变 重 本 身 时 ， 只 要 该 变量 为 true， 
了 个 条 件 测 试 就 为 true， 进而 执行 相应 的 代码 块 ， 


} 如 果 inStock 为 false， 条 件 出 试 将 
和 失败， 进而 跳 过 相应 的 代码 块 


虽然 有 人 认为 比较 鹃 嗪 的 原始 版 本 更 清晰 地 表达 了 其 意图 ， 但 在 实际 代码 中 更 肖 用 的 是 简洁 版 。 
另外， 人 简洁 版 也 更 容易 理解 。 


下 面 两 条 语句 都 根据 变量 onSale 和 inStock 来 计算 变量 puyIt 的 值 。 请 根据 变 
Ds 量 inStock 和 onSale 的 各 种 可 能 取 值 ， 确 定 这 两 条 语句 计算 得 到 的 buyIt 值 。 
:给 到 -。。 娜 条 语句 导致 buyTt 的 值 为 Etzue 的 可 能 性 更 大 呢 ? y 


Var buyIt = (InStock || onSale); 








var buyIt = (InStock && onSale); 
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修改 硬 编 码 的 值 






我 跟 你 说 ， 真 是 奇 了 但 了 。 
不 管 我 们 怎么 做 ， 他 们 好 
像 都 知道 战舰 的 准确 位 置 







你 党 得 这 与 以 硬 编 
码 的 方式 指定 战舰 位 置 
有 关系 吗 ? 





4 < 人 Fs/ A /3 > vi 由 

完 兽 人 简单 的 战舰 游戏 

还 有 一 个 小 问题 需要 处 理 ， 因 为 当前 你 以 硬 编码 的 方式 指定 战舰 的 位 置 ， 每 次 玩 游戏 时 ， 战 舰 
都 位 于 单元 格 3 一 5 处 。 对 测试 而 言 ， 这 没有 任何 问题 ， 但 为 让 游戏 更 有 趣 ， 必 须 随机 地 指定 战 
舰 的 位 置 。 

下 面 来 想 想 ， 在 包含 7 个 单元 格 的 一 维 网 格 中 ， 如 何 正确 地 放置 战舰 呢 ? 我们 需要 一 个 起 始 位 


PAD TI) 


置 ， 它 让 我 们 能 够 将 成 舰 放 置 到 相连 的 三 个 单元 格 中 ， 这 意味 着 起 始 位 置 必 须 是 0 一 4。 








0 1 2 3 
起 始 位 置 可 以 是 0、1、2 5 
式 4， 这 样 余 下 的 空间 才能 容 
6 二 人 拘 二 2 a 
纳 巳 据 三 个 单元 格 的 战 靓 。 不 可 行 起 始 位 置 为 5 或 6 行 不 通 


如 何 随机 地 指定 位 置 


确定 起 始 位 置 (0 一 4) 后 ， 就 可 使 用 它 和 接 下 来 的 两 个 单元 格 来 
放置 战舰 。 


从” 、 使 用 随机 位 置 和 接 下 


var locationl = randomLoc:; 二 WE 
来 的 两 个 单元 格 。 

Var location2 = locationl + 工 ; 

Var location3 = location2 + 1; 


那么 如 何 生 成 随机 数 呢 ?” 这 需要 求助 于 JavaScript 内 置 函数 。 具 
体 地 说 ，JavaScript 有 很 多 内 置 的 数学 函数 ， 其 中 有 两 个 可 用 于 生 
成 随机 数 。 内 置 冰 数 和 一 般 意 义 的 函数 将 在 本 书后 面 更 详细 地 介 
绍 。 就 现在 而 言 ， 我 们 将 直接 使 用 这 些 函 数 来 完成 任务 。 


驹 世间 名 的 随机 数 生 产 配 方 


我 们 先 米 看 函数 Math.random。 通 过 调用 这 个 商 数 ， 可 获得 一 
个 随机 的 小 数 : 


Math.random 包 含 在 
标 准 JavaScript 中 , 


本 们 相 亚 将 一 、 
变量 randomLoc。 我 们 想到 将 已 返回 一 个 随机 数 。 


5 
如 
个 0 一 4 的 数字 赋 给 这 个 变量 


本 var randomLoc = Math.random(); 


/ 


唯一 的 问题 是 ， 它 返回 的 是 0 一 1 (不 包括 1) 
的 小 数 ， 加 0.128、0.850、0.9、0.42， 因 此 
我 们 需要 想 办 法 将 其 转换 为 0 一 4 的 随机 数 。 





我 们 需要 的 是 0 一 4 的 整数 〈 即 0、1、2、3 或 4) ， 而 不 是 小 数 (如 0.34) 。 
为 此 ， 可 将 Math.random 返 回 的 数字 乘 以 5， 以 歼 得 更 接近 目标 的 数字 。 下 


面 的 代码 说 明了 这 一 点 : 


使 用 随机 数 


Va randomLoc = 


如 果 将 随机 数 乘 以 5， 将 得 到 一 
个 0O~5 (不 包括 5) 的 数字 ， 如 
0.139 85、4.251、2.5451 人 或 


4.999。 


< 


Math.random() * 5; 


别 扎 了,，* 表 示 乘 法 运算 。 


这 更 接近 目标 了 ! 现在 需要 做 的 是 ， 将 小 数 部 分 删除 ， 得 到 一 个 
整数 。 为 此 ， 可 使 用 另 一 个 数学 图 数 一 一 Math.f1oor; 


Var randomLoc = 


y 

[9) 。 我 们 要 生成 一 个 0 一 4 的 数 
字 ， 为 何在 代码 中 乘 以 5 (如 Matnh. 
floor(Math.random() * 5)) 呢 ? 
A 8 

合 "， 问 得 好 。 首 先 ，Math.random 
生成 0 一 1 (不 包括 1) 的 数字 。 因 此 使 
用 Math.random 可 生成 的 最 大 数字 为 
0.999…， 来 以 5 后 ， 可 得 到 的 最 大 数 
字 为 4.999…， Math.floor 总 是 向 下 
圆 整 ， 即 将 1.2 圆 整 为 1， 将 1.999 也 贺 
整 为 1。 如 果 我 们 生成 0 一 5 (不 包括 5) 
的 数字 ， 圆 整 后 将 为 0 一 4。 这 并 非 唯 
一 的 做 法 ， 其 他 语言 中 的 做 法 通常 也 不 
同 ， 但 在 JavaScript 代 码 中 ， 这 是 最 常 
见 的 做 法 。 
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我 们 可 以 使 用 Math.floor 将 数字 
同 下 圆 整 为 最 接近 的 整数 。 


Math.floor(Math.random() * 5); 


( 例如 ， 这 将 把 0.1359 835 转 换 为 0， 把 
2.34 转 损 为 2， 把 4.999 转 换 为 4。 


世上 滩 有 
晶 敬 的 问题 


间 ) s 这 么 说 ， 如 果 要 生成 0 一 100 ( 包 
括 100) 的 随机 数 ， 就 可 使 用 代码 
Math.floor(Math.random() * 101) 
了 ? 

A 让 

只 ”完全 正确 | 通过 来 以 101， 再 使 
用 Math.floor 向 下 圆 整 ， 可 确保 结果 
最 大 为 100。 


y 
[5) s。 Math.random() 中 的 括号 是 做 
什么 用 的 ? 


Ap ， 
吟 ' ， 调 用 函数 时 都 需要 使 用 括号 。 
有 时 候 需 要 给 函数 传递 值 ， 如 使 用 
alert 显 示 消 息 时 ; 而 有 了 时候 不 需要 
这 样 做 ， 如 使 用 函数 Math.random 
时 。 然 而 ， 只 要 调用 函数 (无 论 是 
置 肠 数 还 是 非 内 置 函 数 ) ， 都 需要 使 
用 括号 。 现 在 不 要 操心 这 一 点 ， 下 一 
章 将 介绍 这 些 细节 。 


g 8 

[9) 。 我 编写 的 战舰 游戏 不 能 正确 
地 运行 : 在 网 页 中 ， 除 标题 Play 
battleship 外 ， 什 么 都 看 不 到 。 如 何 找 
出 我 在 什么 地 方 做 错 了 呢 ? 

xc 

吟 '， 这 是 控制 台 的 用 起 之 地 。 如 果 
你 犯 了 错 ， 比 如 总 记 用 引号 将 字符 串 
括 起 ，JavaScript 通 常会 指出 程序 的 语 
法 不 正确 ， 还 可 能 指出 问题 出 在 哪 一 
行 。 然 而 ， 有 些 错 误 更 难 发 现 。 例 如 ， 
如 果 你 将 isSunk = false 错 写成 了 
1sSunk false，JavaScript 将 不 
会 显示 任何 错误 消息 ， 但 代码 不 会 像 
期 望 的 那样 运行 。 对 于 这 种 错误 ， 可 
党 试 在 代码 的 各 个 地 方 使 用 console. 
1og 来 显示 变量 的 值 ， 看 看 能 不 能 找 出 


错误 。 


编写 代码 


再 来 一 殉 丈 质量 保证 


ea 下 面 使 用 它们 来 蔡 换 原来 的 位 置 指定 代码 ， 如 下 
所 示 。 然 后 进行 几 次 测试 运行 ， 看 看 你 能 以 多 快 的 速度 击 沉 战舰 。 





Var randomLoc = Math.floor(Math.random() * 5); 


Var locationl = randomLoc:; 


Var location2 = locationl + 1; 
var location3 = location2 + 1; SN 将 原来 的 位 置 变 鲁 声明 和 赋 


值 语句 替换 为 这 些 新 语句 。 





var guess; 
var hits = 0; 
var guesses = 0; 


var isSunk = false; 


while (isSunk == false) { 


guess = prompt("Ready, aim, fire! (enter a number from 0-6):"); 


If (guess < 0 || guess > 6) { 
// 其 他 代码 …… i - 








| 


| Battleship | 让 


下 面 是 我 们 进行 的 一 次 测试 。 随 机 指定 战舰 的 位 置 后 ， 和 二 已 省 十 Eee 
游戏 更 有 趣 了 ， 但 我 们 依然 获得 了 相当 不 错 的 得 分 。 二 


Play battleship! 


The page at localhost says: 
LR 第- > OO" 
@ 0 es 0-6): 十 中 1 战 舰 oO OK 
3 


| Cancel | | OK | 


The page at locaihost says: 
第 二 二 二 次 ?又 稀有 De 2 © MISS 
The page at localhost says: 三 
© Ready, aim, fire! {enter a number from 0-6): 击 中 。 | OK 


4 


L cancel ] Lok |] 





> The page at localhost says: 
The page at localhost says: HIT! 
© Ready, aim, fire! (enter a number from 0-6): 人 一 两 接 下 来 我 们 连 证 缮 车 续 


2 > 两 次 欠 击 中 了 战 舰 。 人 The page at localhost says: 


You sank my battleship! 


| Cancel | OK 
/ (= OK = 


人 The page at localhost says 
Ready, aim, firel (enter a number from 0-6): 忽 ye) 狠 A 
7 , 色 终 将 战 融 人 The page at localhost says: 


本 | 击 “四 You took 4 guesses to sink the battleship, which means vou 
[mC Anmelden ll OK | 了 oO ~ > | 





shooting accuracy was 0.75 














寻找 bug 的 练习 












等 等 ， 我 们 注意 到 好 像 有 什么 地 方 不 对 。 提 示 : 我 们 依次 输入 0、1、1 和 1 
时 ， 结 果 不 太 对 劲 ! 你 能 找 出 其 中 的 原因 吗 ? 


:给 习 - 

下 面 是 我 们 的 猜测 过 程 。 
J © The page at localhost says: 

© The page at localhost says: [一 第 es 次 设 有 猜 对 pi = 区 | 





Ready, aim, firel (enter a number from 0-6): 


0 


| Cancel | OK 





The page at localhost says: 
第 => 次 猜 测 时 9 AAA oa HIT! 
The page at localhost says: = 人 | a 
和 @ Ready, aim, firel (enter a number from 0-6): 我 - 找 过 战 岗 OK 


[ Cancel | [ ok | yr” 
”| i The page at localhost says: 
然后 我 们 不 断 地 输 四 


The page at localhost says: 化 
Ready, aim, firel (enter a number from 0-6): 入 这 个 位 置 ， 每 次 OK | 


. 都 击 中 了 战舰 | 
| Cancel | | OK | The page at localhost says: 
You sank my battleship! 
The page at localhost says: 
Ready, aim, firel {enter a number from 0-6): 


1 2 
Ey Se 击 中 第 三 “ 人 ~、 欠 后 ， 战 岗 SS The page at localhost says: 
:Cancel | | OK | 被 击 沉 沉 3 了 | | 但 她 像 有 © You took 4 guesses to sink the battleship, which means your 


shooting accuracy was 0.7 











什么 地 方 不 对 : 击 中 


我 们 输入 DO、1、1 和 1 ， ，】 同一 个 地 方 三 次 应 该 
战舰 位 于 单元 格 1 一 3 处 。 不 能 将 战舰 击 说 。 


扣人心弦 

我 们 能 找到 这 个 bug 吗 ? 

我 们 能 修复 这 个 bug 吗 ? 

本 书后 面 将 提供 完善 得 多 的 战舰 游 
戏 版 本 ， 敬 请 期 街 ! 


现在 看 看 你 能 想 出 办 法 将 这 个 bug 
修复 吗 ? 





编写 代码 
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涪 党 代码 重 膨 

视 货 你 编写 了 第 一 个 真正 的 JavaScript 程 序 。 你 可 能 和 广 意 到 了 ， 我 们 使 用 了 几 个 内 置 
国 数 ， 如 alLert、prompt、console.1ogd 和 Math.randome。 这 些 国 数 让 你 能 够 弹出 
对 话 杠 、 将 输出 写 入 控制 台 以 及 生成 随机 数 ， 而 你 需要 做 的 工作 很 少 。 这 就 像 变 魔术 
一 样 。 这 些 内 置 函数 是 为 你 编写 好 的 现成 代码 ， 你 可 根据 需要 反复 使 用 ， 而 使 用 时 只 
需 调 用 即 可 。 

对 于 函数 ， 需 要 学 习 的 东西 很 多 : 如 何 调用 它们 ， 可 给 它们 传递 什么 类 型 的 

值 ， 等 等 。 下 一 草 将 着 手 全 面 介 绍 这 些 主题 ， 你 也 将 学 习 如 何 创 建 自 己 的 图 3 





























但 进入 下 一 半 之 前 ， 还 有 一 些 要 扩 需 要 复习， 一 个 填 字 游戏 需要 完成 。 为 外 ， 别 扎 
了 有 睡 个 好 针 ， 将 本 革 的 内 容 邦 消化 消化 。 


QA 


可 使 用 流程 图 来 指出 决策 点 以 及 要 采取 的 措 
施 ， 从 而 大 致 描述 JavaScript 程 序 的 逻辑 。 
编写 程序 前 ， 最 好 使 用 仿 代 码 粗 略 地 摘 绘 一 个 
程序 需要 完成 的 任务 。 

伪 代 码 粗 略 地 搞 绘 了 实际 代码 需要 完成 的 任 
务 。 

有 两 类 布尔 运算 符 : 比较 运算 符 和 逻辑 运算 
符 。 用 于 表达 式 时 ， 布 尔 运算 符 的 结果 为 true 
Bf los. 

比较 运算 符 对 两 个 值 进行 比较 ， 结 果 为 true 或 
false。 例 如 ， 可 像 下 面 这 样 使 用 比较 运算 符 < 


(小 于 运算 符 ) : 3 < ” 6。 这 个 表达 式 的 结果 
为 true。 


逻辑 运算 符合 并 两 个 布尔 值 。 例 如 ,true || 


Lge 全 果 为 te, 出 tu '&& falseH 
汪 果 为 Fa] 


可 使 用 函数 Math.random 来 生成 0 一 1 (包括 0， 
但 不 包括 1) 的 随机 数 。 

函数 Math.floor 将 小 数 向 下 圆 整 为 最 接近 的 
整数 。 

使 用 Math.randqom 和 Math.flLloor 时 ，Math 中 
的 M 务 必 大 写 ， 不 要 小 写 。 
JavaScript 函 数 prompt 显 示 一 个 对 话 杠 ， 其 中 
包含 一 条 消息 以 及 供用 户 输入 值 的 空间 。 

在 本 章 中 ， 我 们 使 用 了 prompt 来 获取 用 户 输 
入 ， 并 使 用 了 alert 在 浏览 器 中 显示 战舰 游戏 
的 结 














JavaScript 填 字 游 戏 





JavaScript 迷 学 游戏 


填 字 游戏 对 学 习 JavaScript 有 何 帮 助 呢 ? 头脑 体操 会 将 


JavaScript 知 识 深 深 地 烙印 在 你 的 脑海 中 | 


横 回 
3. 用 于 获取 用 户 输 入 的 函数 。 


5. 用 于 随机 地 指定 战舰 位 置 的 函数 (句点 之 后 部 分 ) 。 


8. 记录 战舰 是 否 被 击 沉 的 变量 的 类 型 。 
9. 未 人 急 始 化 的 变量 的 值 。 


10. 在 布尔 运算 符 的 两 种 可 能 结果 中 ， 除 true 外 的 另 
一 种 结果 。 


11. while 和 it 语句 都 使 用 的 测试 。 
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呈 醒 硬 硬 古国 国 


纵向 
1. 如 果 你 擅长 测试 程序 ， 可 
专家 ? 

2. 用 于 检查 两 个 值 是 
型 。 

3. 一 种 帮助 你 理解 程序 将 如 何 运 行 的 代码 。 

4. 要 让 AND 运 算 符 (&&) 的 结果 为 true, 条 件 的 两 部 
分 都 必须 是 什么 值 ? 

6. 运算 符 OR (||) 和 AND (gg) 所 属 的 布尔 运算 符 
类 型 。 

7. alert 和 prompt 等 都 属于 JavaScript 的 内 置 什么 ( 复 
数 形式 ) ? 

10. 要 i 上 OR 运算 符 (||) 的 
分 都 必须 是 什么 值 ? 


能 想 成 为 什么 保证 方面 的 


否 相 等 的 == 所 属 的 布尔 运算 符 类 


结果 为 false， 条 件 的 两 部 


编写 代码 


@ 底 乞 上 阵 
公案 


假设 我 们 的 虚拟 网 格 类 似 于 下 面 这 样 : 








并 像 下 面 这 样 使 用 了 位 置 变量 来 指出 战舰 的 位 置 : 


locationl1 = 3; 

location2 = 4; 

location3 = 5; 
而 用 户 的 输入 序列 如 下 : 


1, 4, 2, 3, 5 


在 给 定 上 述 用 户 输入 的 情况 下 ， 前 一 页 的 伪 代 码 将 如 何 执行 呢 ? 请 将 你 认 
为 的 结果 与 在 下 面 。 我 们 指出 了 开始 时 的 情况 。 答 案 如 下 : 


location1 “location2 location 3 guess guesses hits isSunk 
3 4 5 一 一 0 0 false 
3 4 5 1 1 0 false 
3 4 5 4 2 1 false 
3 4 5 2 3 1 false 
3 4 5 3 4 2 false 
3 4 了 3 了 3 trve 
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练习 答案 


下 面 两 条 语句 都 根据 变量 onSale 和 :inStock 来 计算 变量 puyIt 的 | 
值 。 请 根据 变量 inStock 和 onSale 的 各 种 可 能 取 值 ， 确 定 这 两 
条 语句 计算 得 到 的 puyIt 值 。 哪 条 语句 导致 buyIt 的 值 为 true 的 
可 能 性 更 大 呢 ? 使 用 OR 运 算 符 (||) 的 那 条 | 


var buyIt = (InStock || onSale); 





< 
一 vw 


KC 


trve trve true true 





trve false trve false 


false true true false 


false false false false 


var buyIt = (InStock && onSale); 





隆 笔 上 阵 
合 案 


下 面 是 一 系列 需要 计算 结果 的 布尔 表达 式 ， 请 在 空白 处 填写 你 的 计算 结果 。 管 案 如 下 : 






var temp = 81; var keyPressed = "N"; 
var willRain = true; var points = 142; 
var humid = (temp > 80 && willRain == true); Var level; 
if (keyPressed == "Y" | 
humigd 的 值 是 什么 ? _trve_ (Points > 100 && points < 200)) { 
level = 2; 
Var guess = 6; } else 1 
var isValid = (guess >= 0 && guess <= 6); level = 1; 
isValid 的 值 是 什么 ?_trve_ } 
var kB = 1287: level 的 值 是 什么 ? _2_ 
var tooBig = (kB > 1000); 
var urgent = true; 


var sendFile = 
(urgent == true || tooBig == false); 


sendFile 的 值 是 什么 ? _trve 
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编写 代码 





Bob 和 Bill 都 是 会 计 ， 他 们 要 为 公司 网 站 开发 一 个 价格 检查 应 用 程序 。 他 们 都 使 用 布 


给 志 尔 表达 式 编写 了 if/else 语 句 ， 言 心 满 满 ， 认 为 自己 编写 的 代码 正确 无 误 。 
“号 本， 哪个 会 计 编 与 的 代码 是 正确 的 呢 ? 这 两 个 会 计 适 合 从 事 编码 工作 吗 ? 答案 如 下 。 


if (price < 200 || Price > 600) { 

alert("Price is too low or too high! Don't buy the gadget."); 
} else { 

alert("Price is right! Buy the gadget."); 





If (price >= 200 || price <= 600) { 
alert("Price is right! Buy the gadget."); 
} else { 
alert("Price is too low or too high! Don't buy the gadget."); 





Bob 的 编码 水 平 更 高 (可 能 会 计 工 作 也 做 得 更 好 ) 。Bob 的 解 
决 方案 可 行 ， 但 Bill 的 解决 方案 行 不 通 。 为 什么 呢 ? 我 们 使 用 
三 个 不 同 的 价格 ( 太 低 、 太 高 和 刚刚 好 ) 来 检验 Bob 和 Bil 纺 
写 的 条 件 ， 看 看 得 到 的 结果 是 什么 。 如 果 价 格 为 100， 则 Bob 编 号 的 条 件 


为 true (因为 100 小 于 200; 同时 
别 忘 了 ， 使 用 OR 运算 符 时 ， 只 要 一 
价格 | Bob | ”Bil | \， 个 表达 式 为 true， 整个 表达 式 就 为 


trve trve true) ， 因 此 使 用 alert 显 示 不 购买 。 
alert: Don” tbuyl alert: Buy! 


然而 ，Bill 编 写 的 条 件 也 为 true， 的 
为 价格 小 于 或 等 于 600， 因 此 整个 
Wi > 表达 式 为 true， 进 而 让 用 户 购买 ， 虽 
alert: ron” +buy! alert: Buy! 然 价 格 太 低 了 。 
400 false trve 
alert: Buy! alert: Buy! 


( 不 管 价 格 如 何 ， ee 
条 件 总 是 为 true。 因此 他 编写 的 代码 总 
让 用 户 购 买 | Bil 还 是 安心 地 做 会 计 吧 ， 
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练习 答案 


前 面 说 过 ， a i 实际 上 ， 伪 代码 遗漏 了 一 些 内 容 : 没有 指 
出 用 户 的 猜测 对 不 对 。 你 能 将 指出 这 一 总 的 代码 插入 正确 的 地 方 吗 ? 答案 如 下 。 





while (isSunk == false) { 
guess = prompt("Ready, aim, fire! (enter a number from 0-6):"); 
If (guess < 0 || guess > 6) { 
alert("Please enter a valid cell number!"); 
} else 1 
guesses = guesses + 1; 


If (guess == locationl || guess == location2 || guess == location3) 


alert("HIT™); 


hits = hits + 1; 
If (hits == 3) { 

isSunk = true; 

alert("You sank my battleship!"); 
} 


[ae 


} 
} 
VaL stats = "You took " + guesses + " guesses to sink the battleship, " + 
"which means your shooting accuracy was " + (3/guesses); 


alert(stats); 
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编写 代码 


甘 笔 


St 






你 觉得 这 个 版 本 的 击 中 检测 代码 怎么 样 ? 是 不 是 看 起 来 比 需要 的 复杂 ”我们 
重复 代码 的 方式 是 否 显得 有 些 宛 余 ? 能 够 对 其 进行 简化 吗 ? 你 能 够 使 用 || 运 
算 符 (布尔 OR 运 算 符 ) 的 知识 简化 这 些 代 码 吗 ”答案 如 下 。 


if (guess == locationl1) { LL 我 们 反复 使 用 了 相同 的 代码 ， 
hits = hits + 1; 


} else if (guess == location2) { 


如 果 检 调整 hits 的 修改 方式 ， 就 必须 修改 
hits = hits + 1; < 代码 的 三 个 地 方 。 这 弟弟 是 导致 代码 出 现 
} else if (guess == location3) { 以 bug 和 问题 的 根源 。 
hits = hits + 1; 
| N 
不 仅 如 此 ， 这 段 代码 还 比 需要 的 复杂 。 它 更 难 理解 ， 
需要 输入 的 代码 更 多 。 


通过 使 用 OR 运 算 符 ， 可 将 所 有 的 测试 合 而 为 一 ， 使 
得 在 猜测 的 位 置 为 loaction1、loaction2 忆 loaction3 
时 ，if 条 件 就 为 true， 进 而 更 新 变量 hits。 


4 N 


If (guess == locationl || guess == location2 || guess == location3) { 
hits = hits + 1; 
} 除 更 容易 理解 外 ， 是 不 
是 看 起 来 也 舒服 得 多 ? 


另外 ， 如 果 需 要 调整 hits 的 修改 方式 ， 只 需 
要 在 一 个 地 方 这 样 做 ， 更 不 容易 出 错 。 
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下 访 JavaScript 烧 宇 游 戏 带 宗 


填 字 游戏 对 学 习 JavaScript 有 何 帮 助 呢 ?头脑 体操 会 将 这 些 知识 
深 深 烙 印 在 你 的 脑海 中 ! 答案 如 下 。 


到 
a 
加 
加 
图 
”= 
着 
加 


Zoumm> or 


oggagagoog 


四 
于 
加 


NIAIL 
3 
[ES 





8 西数 简介 


类 成 函数 胃 维 


一 ?SHUKUMNOPL RST! 

abcdefghijk|m / 
ecg Nopqrstuywxyzs 
“ bcdef gh fht ms 


iC py p dj { 


Mot 
Ep 二 Ct 
| 
国 “uncfion abc() { 
| refurn "der". 


ER i Ws 


| 
| 





为 使 用 你 的 第 一 个 超级 武器 作 好 准备 。 你 编写 过 一 些 代码 ， 
现在 该 使 用 函数 来 提高 效率 了 。 通 过 使 用 函数 ， 你 可 编写 适用 于 各 种 
不 同 环境 的 代码 。 这 些 代码 可 反复 重用 且 管 理 起 来 容易 得 多 。 你 还 可 
以 将 通用 代码 抽取 出 来 ， 给 它 指定 一 个 简单 的 名 称 ， 这 样 就 能 将 复杂 
/一 全 的 东西 抛 诸 脑 后 ， 将 精力 放 在 重要 的 内 容 上 。 你 将 发 现 ， 函 数 不 仅 是 
本 书后 面 将 更 详细 ”脚本 编写 人 员 通 往 程序 员 的 大 门 ， 还 是 JavaScript 编 程 风 格 的 核心 。 本 
地 介绍 这 个 方面 。 ” 癌 介 绍 函数 的 基本 知识 :机制 以 及 工作 原理 的 方方面面 。 在 本 书 余下 
的 篇 幅 中 ， 你 将 不 断 提高 函数 方面 的 技能 。 下 面 就 来 为 此 打下 坚实 的 
基础 吧 。 
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代码 分 析 


KC 
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隆 所 上 阵 


你 也 可 以 写 下 自己 的 评价 。 


var dogName = "rover"; 

var dogWeight = 23; 

If (dogWeight > 20) { 
console.log(dogName 

} else { 
console.log(dogName 

} 

dogName = "spot"; 

dogWeight = 13; 

If (dogWeight > 20) { 
console.log(dogName 

} else I 
console.log(dogName 

} 

dogName = "spike"; 

dogWeight = 53; 

if (dogWeight > 20) { 
console.log(dogName 

} else { 
console.log(dogName 

} 

dogName = "lady"; 

dogWeight = 17; 

if (dogWeight > 20) { 
console.log(dogName 

} else I 
console.log(dogName 


says 


says 


says 


says 


says 


says 


says 


says 


L]」 A. 重复 的 代码 多 得 不 得 了 。 


请 简单 地 分 析 下 面 的 代码 。 它 给 你 什么 样 的 


WOOF 


woof 


WOOF 


woof 


WOOF 


woof 


WOOF 


woof 


[| |B. 如 果 要 修改 输出 的 显示 方式 或 添 
加 其 他 小 狗 属性 ， 将 需 


复 的 工作 。 


做 六 量 重 


WOOF'"); 


woof"); 


WOOF'"); 


woof"); 


咸 


感 况 ?请 选择 后 面 你 认为 合适 的 评价 ， 


WOOE " ) ; 


woof"); 


WOOF'"); 


woof"); 


图 
[| 


国 


C. 输 入 起 来 很 繁琐 ! 


D. 可 读 性 不 佳 。 


E. 


这 些 代码 到 底 有 什么 问题 呢 


正如 你 看 到 的 ， 有 些 代码 被 反复 使 用 。 这 有 什么 问题 吗 ? 从 表面 上 
看 ， 什 么 问题 都 没有 ， 和 毕竟 它们 能 够 正确 地 运行 ， 不 是 吗 ? 下 面 来 


深入 研究 这 些 代码 。 


var dogName = "rover"; 
var dogWeight = 23; 
if (dogWeight > 20) { 
console.log(dogName + " says WOOF WOOF'™"); 
} else { 


console.log(dogName + " says woof woof"); 


dogName = "lady"; 
dogWeight = 17; 
If (dogWeight > 20) { 
console.log(dogName + " says WOOF WOOF'"); 
} else { 


console.log(dogName + " Says woof woof"); 


} 


诚然 ， 这 些 代 码 看 起 来 一 点 问题 都 没有 ， 但 编写 起 来 很 区 琐 ， 况 
读 起 来 很 痛 兰 ， 而 且 会 在 需要 修改 时 带 来 国 烦 。 随 着 你 的 编程 经 
验 日 益 丰 富 ， 最 后 一 个 问题 将 更 加 明显 : 随 着 时 间 的 推移 ， 所 有 
的 代码 都 需要 修改 ， 而 上 面 的 代码 是 你 迟早 要 面 对 的 眠 梦 ， 因 为 
你 在 其 中 反复 编写 了 同样 的 逻辑 。 如 果 需 要 修改 这 种 逻辑 ， 就 必 
须 修 改 多 个 地 方 。 男 外 ， 程 序 越 大 ， 需 要 修改 的 地 方 束 会 越 多 ， 
因此 犯错 的 可 能 性 也 就 越 大 。 我 们 应 该 做 的 是 ， 想 办 法 将 这 样 的 
代码 提取 出 来 ， 放 在 一 个 地 方 ， 以 便 需要 时 可 轻松 地 重用 (reuse) 
‘Es 











人 


如 何 改 进 这 些 代 码 呢 ? 花 几 分 钟 想 出 几 种 可 
能 的 解决 方案 。JavaScript 提 供 了 可 助 你 一 臂 
之 力 的 特性 吗 ? 


上 一 将 小 狗 的 体重 与 20 进 行 比 较 ， 


如 果 超 过 了 20， 就 发 出 较 大 的 
叫 声 ;否则 就 发 出 较 小 的 叫 声 。 


这 些 代码 与 前 面 完全 相 
必 一 同 。 在 后 面 ， 这些 代码 
还 反复 出 现 了 很 多 次 。 


if (dogWeight > 20) { 
console.log(dogName + " says WOOF WOOF"); 
} else { 


dogName = "spike"; 


console.log(dogName + " says woof woof"); 
} 
dogName = "lady"; 
dogWeight = 17; 
if (dogWeight > 20) { 

console.log(dogName + " says WOOF WOOF"); 
} else { 

console.log(dogName + " says woof woof"); 


} 


省 你 的 
力 
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如 果 能 够 找到 一 种 代码 重 辐 办法， 使 得 需要 时 
能 够 直接 使 用 (而 不 用 重复 输入 ) ， 可 以 给 代码 
缘 定 好 记 的 名 称 以 方便 记忆 ， 并 在 修改 时 只 需 修 
改 一 个 地 方 (而 不 是 很 多 他方) ， 嘟 就 太 好 了 。 
但 我 知道 这 不 过 是 白 晶 做梦 。 





以 前 提 到 过 节 数 咀 


来 认识 一 下 函数 。JavaScript 国 数 让 你 能 够 给 一 系列 代码 指定 名 称 ， 以 便 
需要 时 反复 使 用 它们 。 这 好 像 正 是 我 们 需要 的 约 方 。 


假设 你 要 编写 一 些 反 复 “ 发 出 叫 声 ” 的 代码 : 在 小 狗 较 大 时 发 出 较 大 的 
叫 声 〈 显 示 大 写 的 WOOF WOOF) ， 而 小 狗 较 小 时 发 出 较 小 的 叫 声 ( 显 
示 小 写 的 woof woof) 。 之 后 需要 在 代码 中 多 次 使 用 这 种 发 出 叫 声 的 功能 
下 面 来 编写 一 个 可 反复 使 用 的 bark 国 数 。 











接 下 来 指定 现 数 名 ， 使 用 这 个 函数 时 ， 我 们 将 给 它 提 供 


函数 定义 以 关键 加 bark。 两 项 信息 : 小 狗 的 名 字 和 体重 。 
字 打头 。 
ime 上 /J A fe 息 被 称 为 函数 的 形 参 ， 我 们 将 


它们 放 在 苑 
function bark (name， weight) { 已 们 放 在 数 名 后 面 的 括号 内 。 


人 ~ 这 些 代码 被 称 为 函数 体 ， 它 包括 { 


接 下 来 将 编写 一 些 代码 ， 议 些 代码 将 和 } 之 间 的 所 有 内 容 。 
在 我 们 使 用 函数 时 被 执行 。 


现在 需要 给 这 个 国 数 编写 代码 ， 用 来 检查 小 狗 的 体重 ， 并 输出 相应 的 叫 声 。 


ss 
与 孙 数 形 参 同名 的 变 
首先 需要 检查 体重 。 


function bark(name, weight) { 
If (weight > 20) { 


console.log(name + " says WOOF WOOF"); 








} else { 
console.log(name + " says woof woof"); 
} 
} 
至 此 ， 你 编号 了 一 个 可 在 代码 中 反复 使 用 的 函数 。 
然后 输出 小 狗 的 名 字 和 下 面 来 看 看 其 工作 原理 。 
WOOF WOOF 3 woof woof。 
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函数 的 工作 原理 


络 数 到 搬 是 如 何 工作 的 呢 


先 来 重新 编写 前 面 的 代码 ， 在 其 中 使 用 新 定义 的 图 数 bazk。 








function bark(name, weight) { 
If (weight > 20) { 
console.log(name + " says WOOF WOOF'™"); 这 很 好 ， 所 有 的 代 


} else { 码 远 辑 都 放 在 一 个 
console.log(name + " says woof woof"); 地 方 。 
} 
bark("rover", 23); F- 现在 只 需 调用 函数 bark 几 次 ， 并 将 小 狗 的 名 字 和 
bark("spot", 13); 3 体重 传递 给 它 即 可 。 
bark("spike", 53); 和 一 
bark("lady", 17); 代码 简单 得 多 了 | 








哇 ， 代 码 少 多 了 ， 而 且 对 需要 修改 这 些 代 码 的 同事 来 说 ， 也 容易 理解 多 了 。 男 外 ， 
所 有 地 辑 都 放 在 了 一 个 方便 的 地 方 。 


这 很 好 ， 但 这 些 代 码 是 如 何 协同 工作 的 呢 ? 下 面 来 详细 解读 。 


首先 ， 我 们 定义 了 函数 。 
我 们 在 代码 开头 定义 了 函数 park。 挤 曲 融 读 
取 这 些 代 码 时 ， 发 现 这 是 一 个 畏 数 ， 进 而 碍 


形 参 ， 将 在 调用 菠 数 





看 函数 体 中 的 语句 。 浏 览 器 知道 , 不 应 马上 function bark(name, weight) 1 

执行 这 个 函数 的 语句， 而 要 等 到 在 代码 的 其 | 

他 地 方 调用 了 这 个 函数 时 再 执行 它们 。 console.log(name + " says WOOF WOOF"); 
} else { 

另外 ， 注 意 :到 图 数 是 参 数 化 的 ， 这 意味 着 它 console.log(name + " says woof woof"); 

被 调用 时 将 接受 小 狗 的 名 字 和 体重 。 这 让 你 } 

能 够 针对 任意 数量 的 小 狗 调用 这 个 函数 。 每 ) ) 

次 调用 时 ， 都 将 对 传 入 的 名 字 和 体重 应 用 指 数 内 的 所 有 代码 都 属于 函数 体 。 

定 的 逻辑 。 


下 面 来 调用 这 个 函数 。 


要 调用 函数 ， 只 需 依 次 指定 函数 名 、 

左 括 号 、 需 要 传 入 的 值 (用 喜 号 分 
阳 ) 和 右 括 号 。 括 号 内 的 值 被 称 为 实 
参 ， 就 函数 park 而 言 ， 和 需要 指定 两 个 
实 参 : 狗 的 名 字 和 体重 。 


下 面 古 调用 的 具体 方法 。 








调用 函数 bark 时 ， 
值 被 赋 给 相应 的 形 参 。 


在 函数 内 部 使 用 形 参 时 ， 
使 用 的 都 是 传 入 的 值 。 


调用 函数 后 ， 函 数 体 将 完成 所 有 的 工作 。 


知道 每 个 形 参 的 值 (如 name 的 值 为 "rover"， 
而 weight 的 值 为 23) 后 ， 就 可 以 执行 函数 体 
了。 

就 像 我 们 在 前 面 编 写 的 所 有 代码 一 样 ， 函 数 体 
中 的 语句 也 是 按 从 上 到 下 的 顺序 执行 的 。 唯 一 


的 差别 是 ， 将 传 给 函数 的 实 参 的 值 赋 给 了 形 参 
name 和 weight。 





这 里 传 入 了 两 个 实 参 : 
Wi ”名字 和 体重 。 


bark("rover", 23); 


function bark(name, weight) { 


if (weight > 20) { 
en 





console.log(name + " Says WOOF WOOF™"); 
} else I 


console.log(name + " says woof woof"); 


( es 


function bark(name, weight) { 


i 
conso. Slogd over 下 " says WOOF WOOF"); 


} else { 


console.log(l! "rover" " says woof woof"); 


( 


} 


将 传 入 的 实 参 的 值 同 给 形 参 ， 这 
些 形 参 在 函数 体内 就 像 变 量 一 样 。 


函数 练习 


函数 执行 完毕 后 …… 执 行 函 数 体 的 逻辑 后 (在 这 


使 用 浏览 器 的 开发 工具 来 访问 控制 


人 





个 示 例 中 9 Rover 的 体 重 为 23 磅 5 ge 发 出 较 大 的 HU Elements Resources Network Sources Timeline 
4 过 1 T 2 rover says WOOF WOOF 
声 一 一 显示 大 写 的 WOOF WOOF) ， 函 数 就 执行 完 " 


皇 了 。 国 数 执 
语句 之 后 继续 执行 。 


我 们 只 是 


> 


太一 » 


行 完 毕 后 ， 将 返回 到 调用 函数 park 的 









function bark(name, weight) { 
if (weight > 20) { 
console.log(name + " says WOOF WOOF™"); 
} else { 


console.log(name + " Says woof woof"); 


} 


} 后 的 代码 。 
这 样 做 ， > bark("rover",，23); 


再 这 样 做 本 bark("spot", 13); 


KC 






执行 这 个 函数 | 
bark("spike", 53); 


bark("lady", 17); 


隆 笔 上 阵 


下 面 是 一 些 调用 函数 bark 的 代码 。 在 每 个 调用 劳 边 指出 该 调用 是 售 会 导致 销 误 
会 ， 束 与 出 其 输出 。 继 续 往 下 阅读 前 ， 请 查看 本 章 末 尾 的 答案 。 


bark("juno", 20); ~ 
bark("scottie", -1); 


bark("dino", 0, 0); 


"rover says WOOF WOOF' 


Profiles Audits | Console | 


bark.html:8 


函数 执行 完毕 后 ， 浏 览 器 将 接着 执行 在 调用 该 函数 的 语句 乙 


忆 、 这 里 使 用 不 同 的 实 参 再 次 调用 了 函数 bark， 因 此 将 从 头 开始 


; 如 果 不 


写 出 你 认为 将 
在 控制 台中 显 
示 的 内 容 。 


< 你 知道 这 些 调用 
的 结果 如 何 吗 ? 
bark("fido", "20"); > 


bark("lady", 10); 


bark("bruno", 21); 


代 丫 冰 牙 贴 


冰箱 上 贴 着 一 些 被 打 乱 的 JavaScript 代 码 。 你 能 将 | L 
这 些 代 码 重 组 为 一 个 生成 如 下 输出 的 程序 吗 ? 请 注 户 ] 
意 ， 冰 箱 上 的 有 些 代码 可 能 是 多 余 的 ， 也 就 是 说 你 





可 能 不 会 用 到 所 有 的 冰箱 贴 。 答 案 见 本 章 末 尾 。 


whatShallIWear (80); 


else { 


shirt"); 


console.log("Wear te 


whatShallIWear | 


else if (temp < 70) { 





console.log("Wear a sweater"); 


} 


if (temp < 60) 1 





console.log("Wear a JjJacket"); 





whatShallIWear(60); 
whatShallIWear (50); 


JayaScript 控 制 侣 


Wear a Jacket 


Wear a t-shirt 我 们 以 这 种 方式 
表示 通用 控制 台 。 


Wear a sweater 
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采访 函数 


88 





Head First: 欢迎 函数 ! 我 们 将 深入 挖 据 ， 给 你 3 
不 金 面 攻 光 。 

画 数 
Head First: 我 们 注意 到 ， 很 多 JavaScript 新 手 对 
你 不 于 不 问 。 他 们 直接 动手 编写 代码 ， 从 上 到 下 
一 行 又 一 行 ， 根 本 就 不 使 用 图 数 。 你 真 的 不 可 或 
缺 吗 ? 

太 踪 憾 了 。 你 可 以 这 样 看 我 : 让 你 只 需 编写 代码 
一 次 ， 就 可 反复 重用 它们 。 

Head First: 息 我 不 茶 ， 如 果 你 只 是 让 他 们 能 够 反 
复 做 同样 的 事情 ， 古 不 是 有 点 枯燥 ? 

六 数 : 不 ， 国 数 是 参数 化 的 。 换 名 话说 ， 你 每 次 
使 用 函数 时 都 传 入 实 参 ， 从 而 执行 相关 的 计算 。 
Head First: 比方 说 呢 ? 

函数 : 假设 你 要 向 用 户 指出 其 购物 车 中 商品 的 总 
价 ， 可 编写 尔 数 computeShoppingCartTotal。 
然后 ， 你 就 可 以 将 很 多 用 户 的 购物 车 传递 给 这 个 
前 数 ， 而 它 每 次 都 将 计算 相应 购物 车 中 商品 的 总 
| 。 


Head First:， 既然 你 这 么 厉害 ， 为 何 很 多 新 手 不 用 


A 吕 一 ar YY) 
很 高 兴 接 受 访 谈 。 








位 有 





你 ? 
函数 : 其 实 不 是 这 样 的 ， 他 们 一 直 都 在 使 用 
我 : alert、prompt、Math.random、dqocument . 


write。 如 琳 不 使 用 函数 ， 很 难 编写 出 有 用 的 代 
码 。 不 使 用 函数 的 新 手 并 不 多 ， 这 些 新 手 只 是 不 
定义 目 己 的 函数 而 已 。 


本 周 访谈 : 到 


Head First: alert 和 prompt 古 函数 ， 这 很 好 理 
解 ， 但 Math.random 看 起 来 不 大 像 函 数 。 

函数 : Math.random 也 是 函数 ， 只 是 刚好 关联 到 
了 新 手 用 得 不 多 的 另 一 样 东 西 一 一 对 象 。 

Head First: 哦 ， 是 的 ， 是 对 象 。 读 者 在 本 书后 面 
将 学 习 它 们 。 

国 数 : 那 太 好 了 ， 届 时 我 就 不 用 再 费 口舌 了 。 
Head First: 咱们 来 说 说 实 参 和 形 参 吧 ， 它 们 有 点 
不 太 好 理解 。 

国 数 : 可 以 这 么 理解 : 在 整个 国 数 体 中 ， 每 个 形 
参 都 像 变 量 一 样 。 调 用 国 数 时 ， 传 入 的 每 个 值 都 
将 赋 给 相应 的 形 参 。 

Head First， 实 参 呢 ? 

函数 . 它 指 的 就 是 传递 给 函数 的 值 ， 是 函数 调用 
的 参数 。 

Head First: 你 看 起 来 好 像 也 没 那 么 历 害 。 我 是 
说 你 让 我 能 够 重用 代码 ， 还 让 我 能 够 给 形 参 传递 
值 。 如 采 仅 此 而 已 ， 我 不 觉得 你 有 什么 神秘 的 。 
函数 : 这 只 是 基本 功能 ， 还 有 很 多 其 他 的 功能 : 
我 能 够 返回 值 ， 我 能 够 将 你 的 代码 伪装 成 匿名 
的 ， 我 能 够 实现 闭 包 ， 我 还 与 对 象 关 系 紧密 。 
Head First: 真 的 吧 ? ! 咱们 能 否 再 来 一 次 访谈 ， 
专门 谈 谈 这 种 关系 ? 


函数 ， 





役 问 题 。 


人 p 些 东西 





你 调用 函数 时 癌 它 传递 





ee 


通过 实 参 传递 任何 Java5cript 值 。 


NE 


saveMyProfile("krissy", 


1991, 3.81, false); 


参 ， 这 些 实 参 对 应 于 函数 定义 中 的 形 参 。 


J 
每 
数 


中 


个 实 参 都 传递 给 函 


相应 的 形 人 参 。 


function saveMyProfile(name, birthday, GPA, newuser) { 
IE (birthday >= 2004) { 
// 处理 孩子 的 代码 


// 这 个 函数 的 其 他 代码 





还 可 以 将 变量 作为 实 参 传递 ， 这 种 情况 
数 调 用 与 前 面 的 国 数 调 用 相同 ， 但 将 变量 用 作 实 参 


var student 
var year = 
var GPA = 3 
var status 


var isNewUs 


= "krissy"; 
1991; 
81/100; 





= "existinguser"; 


er = (status 


> 每 个 形 参 


Cn 
了 人 “二 


都 像 是 一 个 变量 ， 


其 实 更 第 见 。 下 而 的 函 


= 


要 传 入 的 每 个 值 都 存储 在 


变量 中 。 


调用 函数 时 ， 将 


变量 的 值 作为 实 参 传 入 。 


== "newuser"); 


saveMyProfile(student, year, GPA, 


本 


在 这 里 ， 我 们 将 变量 量 


student 的 值 “ 
作为 实 参 传递 


name。 


krissy” 


给 形 参 


还 可 以 将 表达 式 用 作 实 参 


var student = "krissy"; 


var status 


var year = 


= "existinguser"; 


1991; 


isNewUser); 


< 一 


人 变量 作为 其 他 实 参 


是 的 ， 


/ 


将 这 些 表 达 
用 作 实 参 也 可 行 | 


式 


y 


对 于 每 个 表达 式 ， 
的 值 ， 再 将 值 传递 


saveMyProfile(student, year, 381/100, status == "newuser"); 


可 将 数字 表达 CE 机 


式 用 作 实 参 。 


会 将 false 传 鹿 


大 式 用 作 实 参 
说 给 欧 数 。 











我 还 是 不 太 确 定 自 己 是 否 了 明白 了 形 
参 和 实 参 的 差别 ， 它 们 指 的 是 同一 
样 东 西 吗 ? 





不 ， 它 们 是 不 同 的 。 
定义 函数 时 ， 可 定义 一 个 或 多 个 形 参 。 


这 里 定义 了 三 个 形 参 : degrees、mode 


和 duration。 | ， Se 
function cook(degrees, mode, duration) 
// 你 的 代码 
} 


调用 函数 时 ， 你 使 用 实 参 进行 调用 。 


cook(425.0, "bake", 45); 


这 些 是 实 参 。 这 里 有 三 个 实 参 ， 一 个 衣 
点 字符 串 和 一 个 整数 。 
pg 山 | 


cook(350.0, "broil", 10); 





因此 ， 形 参 只 需 定义 一 次 ， 但 你 可 能 会 多 次 调用 函数 ， 而 且 每 
次 提供 的 实 参 可 能 不 同 。 


-7 浇 渤 你 的 
脑力 下 述 代 码 的 输出 是 什么 ?你 确定 吗 ? 


function doIt(param) { 
param = 2; 

} 

var test = 1; 

doIt(test); 


console.log(test); 


90 第 3 章 


下 面 是 一 些 JavaScript 人 代码， 其 中 包 仿 变量、 函数 定义 和 函数 调用 。 你 的 任 
务 是 找 出 所 有 的 变量 、 函 数 、 实 参 和 形 参 ， 并 将 它们 填 在 右边 相应 的 方 杠 





:多 稚 飞 、。 中。 继续 往 下 阅读 前 ， 请 查看 本 章 末 尾 的 答案 。 
2 
变量 
function dogYears(dogName, age) { 
Var years = age * 7; 
console.log(dogName + " is " + years + " years old"); 
} 
var myDog = "Fido"; 


dogYears(myDog, 4); 


function makeTea(cups, tea) { 

console.log("Brewing " + cups + " cups of " + tea); 
} 
var guests = 3; 


makeTea(guests, "Earl Grey"); 


function secret() { 

console.log("The secret of life is 42"); 
} 
secret(); 


function speak(kind) { 


记 


var defaultSound = ""; 笑 参 
if (kind == "dog") { 
alert("Woof"); 
} else if (kind == "cat") { 
alert("Meow"); 
} else { 
alert(defaultSound); 形 参 


} 
Var Pet = prompt("Enter a type of pet: "); 
speak(pet); 


按 值 传递 


JavaScript 授 值 传递 实 参 
这 意味 着 传递 的 是 实 参 的 副本 


明白 JavaScript 如 何 传 递 实 参 很 重要 。JavaScript 按 值 传 递 实 参 (pass-by-value) ， 这 意味 
着 把 每 个 实 参 的 值 复制 给 形 参 。 要 了 解 这 是 如 何 传递 的 ， 来 看 一 个 简单 的 示例 。 








省 声明 变量 age， 许 将 其 初始 化 为 7。 


Var age = Ef: age, 


和 志 轴 8 数 addone， 它 包 售 条 数 x<， 关 将 x 的 值 加 1 


function addOne(x) { {4 
x=xXxX+ 1; X | 
| 


} 志和 


外 人 而 采油 同 & 数 addone， 社 将 实 量 age 作 为 实 参 传递 给 它 。age 的 值 被 复制 给 
形 参 x。 


addOne (age); 





各 现在 x 的 值 被 加 上 了 31。 但 别 忘 了 ，x 是 age 的 副本 ， 因 此 只 有 x 的 值 被 加 1， 


而 age 的 值 不 变 。 
function addOne(x) { | 在 addOne 中 | 
addOne 中 ，x 
一 >>X=X+ 1 age 的 值 被 加 1 。 x 省 
将 x 的 值 加 1。 ) 7 和 
虽然 x 的 值 变 了 ， 
但 age 的 值 设 要 o 






沪 如 何 看 待 这 个 按 值 传 递 的 问题 
呢 ? 一 方面 ， 这 似乎 非常 直观 ， 另 一 方 
面 ， 总 党 得 我 好 像 遗 漏 了 什么 。 







很 高 兴 你 考虑 到 了 这 一 点 。 明 白 JavaScript 如 何 给 函数 传递 值 
很 重要 。 一 方面 ， 0 癌 图 数 传递 实 参 时 ， 首 先 复 
制 其 值 ， 再 将 这 个 值 赋 给 相应 的 形 参 。 另 一 方面 ， 如 果 你 不 

明白 这 一 点 ， 就 可 能 对 函 et ee 








错误 的 假设 。 
f 按 值 传 递 的 真正 意义 在 于 ， 在 国 数 中 修改 形 参 的 值 时 ， 只 会 
影响 形 参 ， 而 不 会 影响 传递 给 函数 的 变量 。 差 不 多 就 是 这 样 。 
月 本 2 当然 ， 每 种 规则 都 有 例外 ;本 书后 面 将 通过 两 章 的 篇 幅 介 绍 
jy | 对 象 ， 届 时 我 们 再 来 讨论 这 个 主题 。 请 不 要 担心 ， 只 要 对 按 
而 值 传递 有 深入 的 认识 ， 就 完全 能 够 理解 后 面 的 讨论 。 





就 目前 而 言 ， 只 需 牢 记 由 于 实 参 古 按 值 传 递 的 ， 在 函数 中 人 处 
理 形 参 时 ， 其 影响 范围 将 限制 在 函数 中 。 这 有 点 像 拉 斯 维 加 
斯。 


中 上 一 多 黑体 部 分 原文 为 : “Whatever happens to a parameter 


in the function, stays in the function.” 套 用 拉 斯 维 加 斯 的 城市 宣 
重 瘟 传 语 “What happens in Vegas stays in Vegas.” 。 一 -一 编者 注 


5 


function doIt(param) { 


还 记得 这 个 “ 考 考 你 的 脑力 ” 吗 ? 理解 按 值 传 递 
后 ， 你 现在 的 想法 是 不 是 不 同 了 。 你 第 一 次 狂 对 
了 四? 


param = 2; 
} 
var test = 1; 
doIt(test); 


console.log(test); 


你 现在 的 位 置 ， 
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~ 米 上 7 
函数 实 参 


萌 误 地 调 周 苔 数 


前 面 的 函数 调用 都 正确 无 误 ， 但 如 果 传 递 给 函数 的 实 参 太 多 或 不 够 ， 结 果 将 如 
何 呢 ? 听 起 来 好 像 很 危险 ， 咱 们 来 看 看 。 








实验 1: 如 果 传 入 的 实 参 不 够 ， 结 果 将 如 何 ? 
这 样 做 好 像 很 危险 ， 但 实际 情况 只 是 将 没有 相应 突 参 的 形 参 设置 为 未 定义 ， 
如 下 所 示 : 


function makeTea(cups, tea) { 
console.log("Brewing " + cups + " cups of ”+ tea); 


} 
makeTea(3); 
JavaScript 控 制 台 


Brewing 3 cups of undefined 





注意 到 形 参 tea 的 值 为 undefined， 这 
是 因为 我 们 没有 给 它 传递 值 。 .7 


实验 2: 如 果 传 递 的 实 参 太 多 ， 结 果 将 如 何 ? 
在 这 种 情况 下 ，JavaScript 将 忽略 多 余 的 实 参 ， 如 下 所 示 : 


function makeTea(cups, tea) { 
console.log("Brewing " + cups + " cups of "+ tea); 


} 
makeTea(3, "Earl Grey'", "hey ma!", 42); JavaScript 控 制 合 


Brewing 3 cups of Earl Grey 


避 题 都 设 有 。 函 数 忽 
一 、 > 





实际 上 ， 有 办 法 确定 传递 的 实 参 是 否 太 多 ， 但 现在 我 们 暂时 不 去 管 它 ， 


实验 3: 没有 形 参 时 结果 将 如 何 ? 


不 周 招 心 ， 很 多 留 数 都 没有 形象 ! 


ep 
function barkAtTheMoon() { JavaScfipt 控 制 全 
console.log("Woooooo0oo0oo0o0000001"); everevererererererereretered 


} 
barkAtTheMoon(); 
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比 数 还 可 授 间 值 
你 知道 如 何 与 函数 通信 ， 即 知道 如 何 向 函数 传递 实 参 ， 但 另 一 
个 方向 呢 ? 函数 能 够 与 你 通信 吗 ? 咱们 来 看 看 return 语 名 。 


和 一 这 是 函数 bake， 它 将 烤箱 温度 (单位 


function bake(degrees) { 


var message; 在 人 的 刘 率 什 
/ ree9 A 名 。 
镍 根据 形 参 4695 jp 应 的 字 守 


if (degrees > 500) { pd 冶 一 
message = "I'm not a nuclear eee 


} else If (degrees < 100) { 


message = "I'm not a refrigerator!"; 
} else { 
message = "That's a very comfortable temperature for me."; 


setMode("bake"); 
setTemp (degrees); 人 人、 假设 实际 工作 是 由 这 些 函 数 完 成 的 ， 


} 但 这 里 暂时 不 考虑 它们 的 细节 。 


return message; 
} 我 们 关心 的 是 这 条 return 


语句 ， 它 将 message 作 为 


函数 的 结果 衣 加 。 
var Status = bake(350); 


E40 


这 个 函数 被 调用 并 返回 时 ， 作 为 结果 
退回 的 字符 串 将 被 赋 给 变量 status。 


人 在 这 个 示例 中 ， 如 果 打 印 变 量 status， 将 发 现 
它 存储 的 是 字符 串 “That’s a very comfortable 
temperature forme.”。 请 仔细 研究 这 些 代码 ， 
确认 你 明 自 为 什么 会 这 样 ! 


我 烤 出 美味 饼干 的 最 住 温度 是 
550"C。 请 尝试 使 用 其 他 的 温 
度 调用 函数 bake， 再 接着 往 下 一、 巴 


阅读 。 





return 语 各 


说 解 包 含 eturn 语 名 的 铅 数 的 执行 过 程 


至 此 ， 你 知道 了 实 参 和 形 参 的 工作 原理 ， 还 知道 如 何 从 国 数 返回 值 。 下 面 来 跟踪 一 个 
国 数 的 冤 整 执行 过 程 ， 看 看 一 路 上 的 情况 。 请 务必 按 顺 序 碍 看 下 面 的 步骤 。 


首先 ， 我 们 声明 了 变量 *adqius 并 


将 其 初始 化 为 5.2。 
(8) function calculateAreal(r) { 


@) 接 下 来 ， 调 用 函数 calculateArea,， var area; 
并 将 变量 ragdius 作 为 实 参 传递 给 if (r <= 0) { 
> 
Co return 0; 
要 } else { 
G) 这 个 实 参 的 值 被 传递 给 形 参 *， 而 函 
一 类 火 五 
数 calculateArea 开 始 执行 ， 此 @) Eee Eee 下 a 
时 +r 的 值 为 5.2。 return area; 
} 
@) 执行 函数 体 。 首 先 ， 声 明了 变量 ; 
daread, 然后 检查 形 参 +r 的 值 是 否 小 \ CDivar radius = 5.2; 
于 或 等 二 0 


(var theArea ne 
如 果 r <= 0， 就 从 函数 返回 0， 而 


函数 也 将 停止 执行 。 然而 ， 我 们 (0 console.log("rhe area is: "+ 下 
传 入 的 是 5.2， 因 此 不 会 执行 这 行 





代码 。 
(6) 相反， 将 执行 else 子 句 。 
输出 如 下 | 
@ 使 用 形 参 z 的 值 5.2 计 算 圆 的 面积 。 
\ JavaScript 控 制 全 


The area is: 84.94866535306801 
从 函数 返回 面积 值 。 这 将 停止 执行 函 


数 ， 并 返回 指定 的 值 。 、 


@ 将 函数 返回 的 值 存储 在 变量 开发 人 员 通 常 称 之 为 “跟踪 执行 过 程 或 简 





theArea 中 。 称 为 “跟踪 ”。 正 如 你 看 到 的 ， 调 用 函数 和 
返回 值 时 ， 执 行 流程 可 能 会 有 跳跃 。 请 慢 慢 
宋 ， 一 步 一 步 来 。 
接着 执行 下 一 行 代码 。 ee 


函数 剖析 





知道 如 何 定义 和 调用 函数 后 ， 咱 们 来 透 


副 析 了 函数 的 各 个 组 成 部 分 : 


a 跟 字 function 
数 
function 打 头 。 会 


渔 亲 
渔 亲 


I 
yy 又 


持 


皇 
持 


明 。 


需要 基 
《体内 


的 全 
如 纠 


X 


Var bonus 


彻 地 解释 相关 的 语法 。 下 面 全 面 地 


这 些 形 参 用 


pe 


Jevel * score 大 


return Score + bonus; 





区 = 


隙 数 可 包含 return 语 
但 并 非 必 须 如 此 。 


这 是 函数 体 句 ， 
的 右 花 括号 


》 

[9) ; 如 果实 参 的 顺序 不 对 ， 将 错误 
的 实 参 传递 给 了 形 参 ， 结 果 将 如 何 ? 
A 

喉 很 难说 ， 但 几乎 可 以 肯定 ， 这 
要 么 导致 代码 不 正确 ， 要 么 导致 运行 


阶段 错误 。 务 必 仔 细 查 看 函数 的 形 参 ， 


以 确定 函数 要 求 传 入 哪些 实 参 。 


2 
[9); ， 形 参 名 前 为 何 没有 关键 rear 
形 参 不 是 一 个 新 变量 取 ? 


return 语 句 包 


是 项 区 问题 


Re 
但 这 种 变量 的 实例 化 工作 都 是 由 函数 
替 你 完成 的 ， 因 此 你 不 需要 在 形 参 名 
前 指定 关键 字 va。 


人 ] ， 有 哪些 函数 命名 规则 ? 

A , 

号 ”函数 命名 规则 与 变量 命名 规则 
相同 。 与 变量 一 样 ， 应 使 用 对 你 来 说 


有 意义 的 函数 名 ， 并 指出 函数 的 作用 。 


你 还 可 以 在 函数 名 中 使 用 骆驼 式 拼写 
法 (如 camelCase) 来 组 合 多 个 单词 。 


消 数 体位 于 两 个 花 
括号 内 ， 巾 一 组 语 
句 组 成 。 这 些 语句 
与 你 熟悉 的 语句 没 
什么 不 同 。 


二 


一 个 将 作为 还 


全 


人 

四 
人 ) ; 如果 用 作 实 参 的 变量 与 形 参 同 
名 (如 将 它们 都 命名 为 x) ， 结 果 将 如 
何 ? 
A i 
只 ” ， 即 便 实 参 和 形 参 同名 ， 如 都 为 
x， 实 参 x 也 将 为 形 参 x 的 副本 。 因 此 它 
们 是 两 个 不 同 的 变量 ， 修 改 形 参 x 的 值 
不 会 导致 实 参 x 的 值 发 生变 化 。 
人 
(9) : 


它 将 返 


如 果 函 数 没 有 zetuzn 语 句 ， 
返回 什么 ? 

A 

DS s 没有 return 语 名 的 学 数 返 回 


undefined, 























我 注意 到 你 开始 将 变量 声明 放 
在 函数 中 了 。 和 这样 的 声明 与 隔 数 外 
的 声明 一 样 吗 ? 


问 得 好 。 答 案 是 肯定 的 ， 也 是 否定 的 。 

在 国 数 内 声明 变量 时 ， 也 可 以 初始 化 新 变量 ， 从 这 
种 意义 上 说 ， 它 们 与 函数 外 的 变量 志明 相同 。 然 
而 ， 这 两 种 变量 再 明 的 差别 在 于 变量 在 什么 地 方 可 
用 ， 即 可 在 JavaScript 代 码 的 什么 地 方 引 用 它 。 如 
果 变 量 是 在 函数 外 再 明 的 ， 就 可 在 代码 的 任何 地 
方 使 用 它 ， 如 末 变 量 是 在 一 个 国 数 中 声明 的 ， 就 只 
能 在 这 个 函数 中 使 用 它 。 这 被 称 为 变量 的 作用 域 
(scope) 。 作 用 域 分 两 种 : 全 局 (global) 和 局 部 
(local) 。 















我 们 需要 谈 谈 你 使 用 变 


的 方式 。 


全 局 变量 和 局 部 区 量 
外 要 明白 名 们 的 兰 别 ， 
会 串 性 哆 
你 知道 ， 可 在 JavaScript 代 码 的 任何 地 方 使 用 关键 字 var 


和 名 称 来 声明 变量 : 
这 些 是 全 局 变 重 ， 在 
.a Java5Script 代 三 it 代码 的 任何 
1000; 地 方 都 可 访问 它们 。 


var avatar; 


var levelThreshold = 





你 看 到 了 ， 还 可 在 函数 中 声明 变量 : 
function getScore(points) { 变量 points、 score 和 i 都 是 在 
var score; < 一 - 瑚 消 数 中 声明 的 。 
var i = OR | 


while (i < levelThreshold) { 
// 你 的 代码 议 些 变量 被 称 为 局 部 变量 ， 
加 为 它们 只 在 当前 函数 中 
i=i+1; 可 用 。 
} 


return score; 


} 虽然 我 们 在 函数 中 使 用 了 变量 levelThreshold， 但 
它 也 是 全 局 的 ， 因 为 它 是 在 函数 外 面 声明 的 。 


这 有 什么 关系 吗 ? 不 都 是 变量 吗 ? 变量 的 声明 位 置 决 
定 了 它 在 代码 的 哪些 地 方 是 可 见 的 。 熟 悉 这 两 种 变量 
的 工作 原理 不 仅 有 助 于 你 理解 别人 编写 的 代码 ， 还 有 
助 于 你 编写 出 更 易于 维护 的 代码 。 









如 用 受 量 是 在 淳 
次 外 声明 了 的， 
就 龙 全 局 次 量 ; 
如 采 受 量 是 和 社 及 
次 中 声明 了 的， 
就 龙 局 名 区 旺 。 


















问 企 小 问题 。 前 面 说 过 ， 应 该 
给 变量 指定 有 意义 的 名 称 ， 可 刚才 
你 却 使 用 了 变量 名 i， 其 含义 好 像 不 
是 很 明确 。 


问 得 好 。 

将 i 用 作 和 迭代 变量 的 做 法 历史 悠 人 。 这 种 约定 始 于 至 
间 有 限 的 年 代 〈 如 使 用 打 孔 卡 编写 代码 的 年 代 ) ， 那 
时 使 用 简短 的 变量 名 有 好 处 。 当 前 ， 所 有 的 程序 员 都 
知道 这 种 约定 。 你 还 会 经 常 看 到 这 样 使 用 j、k 乃 至 x 
和 y 的 做 法 。 这 是 选择 有 意义 的 变量 名 这 种 最 佳 实践 
有 的 为 数 不 多 的 例外 之 一 。 


了 解 局 部 效 量 和 全 局 菇 量 的 作用 城 


变量 的 定义 位 置 决定 了 其 作用 域 ， 


站 三 册 
有 时。 


的 作用 域 为 局 部 。) 


var avatar = "generic"; 
var skill = 1.0; 


var pointsPerLevel = 1000; 


Var userPoints = 2008; 










function getAvatar(points) { 





var level = Points / pointsPerLevel; 






if (level 









return "Teddy bear"; 
(level == 1) 
"Cat 
(level >= 


"Gorilla": 








{ 


} else if 








return 











2) { 


} else if 








return 





function updatePoints(bonus, newPoints) { 
Var i = 0; 
while (i < bonus) { 
newPoints = newPoints + SKILL * bonuSsy 


os als 


} 


return newPoints + userPoints:; 


userPoints = updatePoints(2, 100); 
avatar = getAvatar(2112); 


即 变 量 在 代码 的 哪些 地 方 可 见 ， 哪 些 地 方 不 
可 见 。 咱 们 来 看 一 个 例子 ， 其 中 有 作用 域 为 全 局 的 变量 ， 也 有 作用 域 为 局 部 的 变 
( 别 忘 了 ， 在 函数 外 定义 的 变量 的 作用 域 为 全 局 ， 而 在 函数 中 定义 的 变量 





这 4 个 变量 的 作用 域 是 局 部 的 。 
这 意味 着 它们 在 后 续 所 有 代码 
中 都 是 已 定义 且 可 见 的 。 


请 注意 ， 如 果 你 在 网 页 中 链接 到 
了 其 他 的 脚本 ， 它 们 将 能 够 看 到 
0 而 你 也 能 看 到 它 


们 的 全 局 变量 


这 里 的 变量 level 是 局 部 变 重 ， 
只 在 函数 getAvatar 中 可 多 。 
这 意味 着 只 有 这 个 函数 能 够 
访问 变 重 level。 


别 忘 了 形 参 points， 它 也 是 一 
个 局 部 变量 ， 其 作用 域 为 函数 
getAvatar。 


注意 到 函数 getAvatar 还 使 用 
了 全 局 变量 pointsPerLevel。 


在 函数 updatePoints 中 ， 我 们 
定义 了 局 部 变量 i， 它 对 孙 数 
updatePoints 的 所 有 代码 来 说 
都 是 可 见 的 。 
bonus 和 newPoints 也 是 函数 
updatePoints 的 局 部 变量 ， 而 
userPoints 是 全 局 变量 。 


在 这 些 代码 中 ， 只 能 使 用 全 局 
变量， 无 法 访问 图 数 中 定义 的 
任何 局 部 变量 ， 因为 局 部 变量 
在 全 局 作用 域内 不 可 见 














你 现在 的 位 置 w 101 


YUELES 


对 
wl 


作用 域 


嘟 企 变量 就 在 我 身后 ， 于 真 万 
确 ， 可 就 在 我 转身 的 工夫 ， 它 
就 不 见 了 。 


短命 的 变量 

如 采 你 是 变量 ， 就 努力 拼搏 吧 ， 因 为 你 的 日 子 
可 能 不 多 了 了。 除非 你 是 全 局 变量 ， 否 则 情况 就 
是 这 样 的 ， 但 即便 是 全 局 变量 ， 寿 命 也 是 有 限 
的 。 是 什么 决定 了 变量 的 寿命 呢 ? 你 可 以 这 人 么 
认为 。 

全 局 变量 的 寿命 与 网 页 一 样 长 。 全 局 变量 在 
JavaScript 代 码 加 载 到 网 页 之 后 降生 ， 并 在 网 页 
消失 后 死去 。 重 新 加 载 网 页 时 ， 将 销毁 并 重新 
创建 所 有 的 全 局 变量 。 


局 部 变量 通常 在 函数 结束 时 消失 。 局 部 变量 是 
= ee 六 这 里 说 “通常 ”是 因为 有 一 些 言 
在 函数 被 调用 后 创建 的 ， 并 一 直 活 到 函数 返回 、 员 扫 基 ， 这 容 ， 是 人 为 有 此 训 
人 2 ) ey 、 立 RS 县 -好 ， 人 站 人 太 同 缉 又 量 避 
(无 论 国 数 是 否 返回 值 ) O 然而 ， 在 局 部 变量 的 命 ， 但 我 们 暂时 不 考虑 这 些 。 


大 限 到 来 前 ， 可 从 函数 返回 它们 的 值 。 


从 上 面 的 介绍 可 知 ， 杰 量 的 寿命 不 可 能 超过 网 
页 的 寿命 。 如 果 你 是 局 部 变量 ,将 来 去 匆匆 ，; 
即便 你 足够 季 运 ， 古 全 局 变量 ， 最 多 也 只 能 活 
到 六 咒 带 重 新 加 载 网 页 之 时 。 








全 考 昌 要 PR 如 了 孚 

于 万 别 和 已 了 声明 局 部 变量 僻 用 未 声明 的 疾 量 
如 果 你 使 用 未 声明 的 变量 ， 它 就 会 是 全 局 的 。 这 意味 着 _ i 
即便 你 首次 使 用 一 个 变量 时 是 在 函数 内 部 (因为 你 想 将 了 时， 它 将 上 自 沙 被 视 
其 作为 局 部 变量 ) ， 这 个 变量 也 将 是 全 局 的 ， 在 函数 外 > 逃 
面 也 可 用 (这 可 能 带 来 麻烦 ) 。 因 此 ， 对 于 局 部 变量 ， 为 包 局 区 量 ， 即便 
千 万 别 忘 了 声明 它们 |! 你 在 饭 数 中 首次 爹 
function playTurn(player, location) { 用 t 开 如 此 一 

points = 0; 《7 使 有 构 量 pointe 前 ,我们 


OLED 忘 了 使 用 关键 字 var 声 明 
Points = Points + 100; 它 ， 因 此 它 被 目 动 视 为 
} 全 局 变量 。 


return points; 
} 
var total = playTurn("Jai", 1); 
alert(points); 
这 意味 着 可 以 在 函数 外 面 使 用 points| 函数 
WA 
MRI 7 。 


上 述 代码 与 下 面 的 代码 等 价 : 


由 于 你 忘记 使 用 关键 宁 var， JavaScript 
认为 你 要 将 points 作 为 全 局 变量 ， 就 像 
在 全 局 作用 域内 声明 了 它 一 样 。 
var points = 0; 
function playTurn(player, location) { 
points = 0; 
if (location == 1) { SS 
points = points + 100; 


) 在 记 声 明 局 部 变量 可 能 





会 带 来 麻烦 一 一 如 果 使 

PU 用 了 同名 的 全 局 变量 ， 

} 这 可 能 会 修改 并 非 你 要 
var total = playTurn("Jai", 1); 修改 的 值 。 


alert(points); 





如 果 有 局 部 变量 与 全 局 变量 
同名 结果 将 如 何 ? 











它 将 “ 遮 住 ” (shadow) 全 局 变量 。 


这 是 什么 意思 呢 ? 假设 你 定义 了 全 局 变量 beanCoun- 
ter， 然 后 再 明了 如 下 负数 : 


Var beanCounter = 10; 





< 和 一 有 一 个 名 为 
beanCounter 
function getNumberOfItems(ordertype) { 的 全 局 变量 


var beanCounter = 0; 还 有 一 个 名 为 
If (ordertype == "order") { beanCounter 
Py 的 局 部 变量 
// 对 bean Counter 做 些 什么 
} 


return beanCounter:; 


如 有 你 这 样 做 ， 每 次 在 国 数 中 使 用 beanCountez 时 ， 
引用 的 都 是 局 部 变量 ， 而 不 是 全 局 变量 。 因 此 ， 我 们 
说 局 部 变量 遮 住 了 全 局 变量 。 换 句 话 说， 我 们 看 不 到 
全 局 变量 ， 因 为 它 被 局 部 变量 挡住 了 。 


八 请 注意 ， 全 局 杰 变量 和 局 部 变量 不 
会 相互 影响 . 加 有 从 从 性 其 中 
= 对 人 
它们 是 彼此 独立 的 变 








函数 简介 


下 面 的 JavaScript 人 代码， 包含 一 些 变 量 、 函 数 定义 和 水 数 调 用 。 你 的 任务 是 找 出 所 
有 的 实 参 、 形 参 、 局 部 变量 和 全 局 变量 ， 将 它们 填 在 右边 相应 的 方 框 中， 并 圈 出 
外 这 住 的 变量 。 记 得 查看 本 章 末 尾 的 答案 。 


var y = 44; 

var radius = 5; 
Var centerX = 0; 
Var centerY = 0; 


var width = 600; 
var height = 400; 


function setup(width, height) { 
centerX = width/2; 
centerY = height/2; 

} 


function computeDistancel(xl1, yl, x2, y2) { 








< 
0 
Rs 
% 

中 
OW 
py 
将 


Var dx = xl1 - x2; 


Var dy = yl - y2; 局 部 变量 


var d2 = (dx * dx) + (dy * dy); 
var d = Math.sqrt(d2); 
return dd; 

} 


function circleAreal(r) { 


Var area = Math.PI * r 大 r; 


return area; 全 局 变 量 
} 
setup(width, height); 
var area = circleArea(radius); 
var distance = computeDistance(x, y, centerX, centerY); 
alert("Area: " + area); 
alertl("Distance: " + distance); 
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今 晚 主题 : 全 局 变量 和 局 部 变量 争论 谁 对 程序 来 说 更 重要 。 





黑 ， 局 部 变量 ,我 真 不 知道 为 什么 要 用 你 ， 因 为 

我 能 满足 程序 员 的 所 有 变量 需求 。 毕 帝 ， 我 在 什 

么 地 方 都 是 可 见 的 ! Wie rl Ml a 
格 。 很 多 冰 数 邦 需 要 局 部 变量 ， 即 只 有 它们 目 己 
a 
见 的 。 





你 必须 承认 ， 可 将 所 有 的 局 部 变量 禁 换 为 全 局 变 

量 ， 同 时 确保 函数 完全 像 以 前 一 样 工作 。 
你 这 话说 对 也 对 ， 说 不 对 也 不 对 。 如 果 特 别 小 心 ， 
确实 如 些 。 但 要 做 到 那么 谨慎 很 难 ， ee 
会 让 函数 使 用 其 他 国 数 用 于 其 他 目的 的 变量 。 
还 会 让 程序 乱七八糟 ， 充 斥 着 只 有 一 个 国 数 需 
的 全 局 变量 





不 一 定 会 乱七八糟 。 程 序 员 可 在 程序 开头 创建 需 
要 的 所 有 变量 ， 这 样 变量 就 都 在 一 个 地 方 了 。 


调用 需要 变量 (如 x) 的 函数 时 ， 如 果 程 序 员 不 
记得 x 以 前 被 用 于 做 什么 ,结果 将 如 何 呢 ?” 程 序 
员 必 须 查 看 所 有 的 代码 ， 看 看 是 否 在 其 他 地 方 使 
用 过 xl! 这 真是 慎 梦 。 








只 要 命名 得 当 ， 就 能 够 更 轻松 地 记 住 变 量 。 


那 形 参 呢 ? 函数 形 参 都 是 局 部 变量 ， 就 是 想 避 也 
避 不 开 。 
实 是 这 样 。 但 如 来 需要 的 所 有 值 都 存储 在 全 局 
ne 要 实 参 和 形 参 做 什么 呢 ? 


看 你 说 的 。 函 数 的 根本 目标 在 于 让 程序 员 人 能 够 
用 代码 ， 以 便 根据 不 同 的 输入 计算 不 同 的 东西 。 





但 局 部 变量 的 寿命 都 很 得 ， 如 县 伦 一 现 。 





根本 不 使 用 全 局 变量 ? 对 JavaScript 程 序 员 来 说 ， 
全 局 变量 就 是 中 流 做 柱 | 








看 来 我 得 喝 一 杯 了 。 





面 对 现 实 吧 。 除 非 万 不 得 已 ， 否 则 就 应 该 使 用 
局 部 变量 而 不 是 全 局 变量 ， 这 是 一 种 恨 好 的 编 
程 实践 。 全 局 变量 会 带 来 大 有 麻烦。 我 见 过 一 些 
JavaScript 程 序 基本 上 不 使 用 全 局 变量 | 





对 没有 经 验 的 程序 员 来 说 ， 确 实 如 此 。 但 程序 员 
在 学 会 如 何 正确 地 组 织 代码 ， 以 确保 正确 性 、 近 
高 可 维护 性 和 遵循 民 好 的 编码 风格 后 ， 就 只 会 在 
迫不得已 的 情况 下 使 用 全 局 变量 。 





让 全 局 变量 哆 一 杯 ? 看 来 这 个 世界 真是 太 人 危险 了 。 







根本 不 需要 看 你 的 局 部 变量 ， 
你 的 了 脾 都 号 在 脸 上 了 。 
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1 08 CE .YE 
5 二 一 一 


世上 滩 和 有 
晶 敬 的 问题 


[oj : 记 住 所 有 局 部 变量 和 全 局 变量 的 作用 域 很 难 ， 为 
何不 始终 使 用 全 局 变量 ?我 一 直 都 是 这 样 做 的 。 


A 

号 "如果 你 要 编写 的 代码 很 复杂 或 需要 长 期 维护 ， 襄 
必须 小 心地 管理 变量 。 如 果 大 量 创建 全 局 变量 ， 将 难以 
跟踪 都 在 什么 地 方 使 用 了 这 些 变量 (以 及 在 什么 地 方 修 
改 了 它们 的 值 ) ,而 这 可 能 导致 代码 充斥 bug。 与 人 会 
作 编 写 代码 或 使 用 第 三 方 库 时 ， 避 免 这 些 问 题 就 更 为 重 
要 (编写 良好 的 第 三 方 库 也 会 尽量 避免 这 些 问 题 ) 。 
因此 ， 可 在 合适 的 情况 下 使 用 全 局 变量 ， 但 要 适度 ， 并 
尽 可 能 使 用 局 部 变量 。 获 得 更 多 JavaScript 经 验 后 ， 你 就 
能 使 用 其 他 代码 组 织 技术 ， 让 代码 更 容易 维护 。 


人 ) ;我 在 网 页 中 使 用 了 一 些 全 局 变量 ， 同 时 加 载 了 其 
他 JavaScript 文 件 。 请 问 这 些 文件 的 全 局 变量 是 独立 的 
吗 ? 

A 

吟 ' ， 只 有 一 个 全 局 作用 域 ， 因 此 加 载 的 每 个 文件 看 
到 的 变量 都 相同 (它们 创建 的 全 局 变量 位 于 同一 个 空间 
内 ) 。 因 此 ,避免 使 用 的 变量 发 生 冲 突 (并 尽 可 能 少 用 
甚至 不 用 全 局 变量 ) 至 关 重 要 。 


y 
上 9】 ;如 果 形 参与 全 局 变量 同名 ， 它 会 速 住 全 局 赤 
3? 


wl 


A 

号， 会 .与 在 函数 中 声明 了 与 全 局 变量 同名 的 局 部 变 
量 一 样 ， 如 果 使 用 了 与 全 局 变量 同名 的 形 参 ， 该 形 参 也 
会 让 住 相 应 的 全 局 变量 。 只 要 在 函数 中 不 使 用 该 全 局 变 
量 ， 遮 住 它 就 没有 什么 关系 ， 但 最 好 使 用 注释 对 这 一 点 
进行 说 明 ， 以 免 以 后 阅读 代码 时 感到 迷惑。 


人 o) ， 在 浏览 器 中 重新 加 载 网 页 时 ， 会 重新 初始 化 所 有 
的 全 局 变量 吗 ? 

A i 

只 ， 是 的 。 对 变量 而 言 ， 重 新 加 载 网 页 与 首次 加 载 网 
页 一 样 。 如 果 重 新 加 载 网 页 时 正在 执行 代码 ， 所 有 的 局 
部 变量 也 都 会 消失 。 


喉 " ， 与 全 局 变量 一 样 ， 可 在 函数 中 首次 需要 局 部 变量 
时 声明 和 它 。 然 而 ， 在 函数 开头 声明 局 部 变量 是 一 种 良好 
的 编程 实践 ， 这 样 别 人 阅读 你 的 代码 时 就 能 很 容易 找到 
这 些 声 明 ， 看 一 眼 就 知道 函数 使 用 了 哪些 变量 。 另 外 ， 
推迟 声明 变量 时 ， 如 果 在 函数 体 中 原来 预期 的 位 置 之 前 
使 用 了 它们 ， 将 可 能 导致 意料 之 外 的 行为 。JavaScript 在 
函数 开始 执行 时 创建 所 有 的 局 部 变量 ， 而 不管 这 些 变量 
是 否 已 经 声明 (这 被 称 为 提升 ,后面 将 更 详细 地 讨论 ) ， 
但 变量 在 赋值 前 都 是 未 定义 的 ， 这 可 能 不 符合 你 的 初 训 。 


\ 

[9); 所 有 人 都 抱怨 JavaScript 过 度 使 用 全 局 变量 。 为 
什么 会 这 样 ? 是 这 门 语言 设计 得 太 糟 糕 、 大 家 没有 意识 
到 自己 在 过 度 使 用 全 局 变量 ， 还 是 其 他 什么 原因 呢 ? 我 
们 该 怎么 办 ? 


AAA ， 

份 ' ， 在 JavaScript 中 ， 常 常 过 度 使 用 全 局 变量 。 部 分 
原因 是 JavaScript 对 代码 的 结构 要 求 不 严 ， 不 需要 规划 就 
可 直接 编写 代码 ， 这 其 实 是 件 好 事 。 对 于 需要 长 期 维护 
和 修改 的 重要 代码 (所 有 的 网 页 都 属于 这 样 的 代码 ) ， 
这 样 编写 的 缺点 就 暴露 出 来 了 。 虽 然 有 这 样 或 那样 的 缺 
点 ， 但 JavaScript 是 一 门 功 能 强大 的 语言 ， 提 供 了 对 和 象 等 
特性 ， 让 你 能 够 以 模块 化 的 方式 组 织 代 码 。 很 多 图 书 都 
专门 介绍 了 对 象 这 一 主题 ， 本 书 第 5 章 也 会 让 你 对 其 有 
大 致 的 了 解 。 





前 面 花 了 很 大 的 篇 蝎 讨 论 局 部 变量 
和 全 局 变量 ,以 及 应 该 在 什么 地 方 声 
了 明 它 们 ， 但 未 谈 及 该 在 什么 地 方 声明 
名 数 。 应 将 所 有 的 号 数 都 放 在 JavaScript 
文件 开关 吗 ? 












实际 上 ， 可 将 函数 放 在 JavaScript 文 件 的 任何 地 方 。 


JavaScript 不 在 乎 函 数 是 在 使 用 前 还 是 使 用 后 声明 的 。 例 如 ， 
请 看 下 面 的 代码 : 





注意 到 我 们 在 定义 


var radius = 5; x 
var area = circleArea(radius); 函数 circleArea 前 
” ”使 用 了 它 | 





alert(area); 


function circleAreal(r) { 
var a = Math.PI * r * r; 


return a; 
在 上 述 代码 中 ， 前 数 circleArea 实 际 
上 是 在 调用 后 才 定 义 的 ， 这 到 底 是 
怎么 回 事 呢 ? 


这 好 像 确 实 很 奇怪 ， 如 有 末 你 还 记得 训 唤 龙 加 载 网 页 时 
就 开始 按 从 上 到 下 的 顺序 执行 文件 的 JavaScript 代 码 ， 
就 更 会 觉得 奇怪 。 然 而 ， 实 际 情况 是 ， 剖 览 右 分 两 过 
读 取 网 页 : 第 一 过 读 取 所 有 的 函数 定义 ， 第 二 过 开始 
执行 代码 。 这 让 你 可 以 将 函数 放 在 文件 的 任何 地 方 。 
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函数 练习 


乱 无 名 装置 


去 名 闭 置 (Thing 一 人 一 Ma 一 Jig) 误 计 得 非常 巧 阔 ， 安 能 够 发 出 叮当 声 (dlank) 、 沉 闷 的 金属 直 (clunk) 和 
构 构 声 (thunk) 。 它 到 褒 是 做 什么 的 呢 ? 我 们 也 说 不 清 ， 但 程序 员 宣 称 俯 们 知 益 其 中 的 工作 原理 。 你 能 
破解 六 些 代 码 ， 找 出 其 中 的 奥秘 吗 了 





function clunk(times) { 


在 这 里 列 出 你 认 
var num = times; WM 为 的 输出 
while (num > 0) { 


di 1 "el k" If 
isplay("clunk") JavaScript 控 制 台 





num = num - 1; 


function thingamajig(size) { 
var facky = 1; 
clunkCounter = 0; 
If (size == 0) { 
display("clank"); 
} else if (size == 1) { 
display("thunk"); 
} else { 
while (size > 1) { 
facky = facky * size; 
size = size - 1; 
} 
clunk(facky); 


function display(output) { 
console.log(output); 
clunkCounter = clunkCounter + 1; 

} 

var clunkCounter = 0; 

thingamajig(5); 


console.log(clunkCounter); 


建议 你 同 这 人 台 无 名 装置 输入 O、1、2、5、 
4、5 等 ， 看 看 能 和 否 明 自 它 是 做 什么 的 。 





Web 镇 代码 卫生 指南 


在 Web 镇 ， 大 家 喜欢 保持 整洁 有 序 ， 为 扩展 做 好 准备 。 说 到 保持 整洁 有 
序 ， 代 码 对 这 种 需求 十 分 迫切 ， 但 在 组 织 变量 和 函数 方面 ，JavaScript 的 
要 求 太 过 宽松 。 有 鉴于 此 ， 我 们 编号 了 这 份 简要 的 指南 ， 向 Web 镇 的 新 
人 提出 了 一 些 建议 。 该 指南 免费 提供 ， 拿 一 份 吧 。 








在 开头 声明 全 局 变量 ! 

尽 可 能 将 全 局 变量 都 放 在 一 起 ， 如 采 将 它们 都 放 在 开头 ， 融 很 容 多 找到 。 
你 并 非 必 须 这 样 做 ， 但 如 末 将 代码 中 用 到 的 变量 都 放 在 开头 ， 征 不 是 更 
容 多 找到 呢 ? 

函数 喜欢 扎堆 。 


不 完全 是 这 样 ， 它 们 实际 上 并 不 在 乎 ， 因 为 它们 只 是 国 数 。 但 如 末 将 
国 数 放 在 一 起 ， 碍 找 起 来 将 容易 得 多 。 你 知道 ， 训 贤 右 实际 上 首先 在 
JavaScript 代 码 中 找 出 函数 。 因 此 你 可 以 将 函数 放 在 文件 开头 ， 也 可 以 
放 在 文件 未 尾 ， 但 如 条 将 它们 都 放 在 一 个 地 方 ， 你 的 工作 将 更 轻松 。 在 
Web 镇 ， 大 家 通 负 将 全 局 变量 放 在 开头 ， 再 接着 定义 国 数 。 


在 函数 开头 声明 全 局 变量 。 


将 所 有 的 局 部 变量 声明 都 放 在 函数 体 开 头 ， 这 样 更 容 多 找到 它们 ， 还 能 
确保 使 用 前 正确 地 声明 了 它们 。 


就 这 些 ， 愿 你 享受 在 Web 镇 的 编码 时 光 。 
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我 向 调用 


扣 | 


3 数 的 代码 返回 值 。 


我 意味 着 创建 副本 。 

我 在 什么 地 方 都 可 见 
我 是 调用 函数 的 近义词 。 

我 是 一 个 与 对 象 相 关联 的 函数 。 


一 大 拨 Javascript 成 员 乔 装 打扮 ， 正 在 玩 一 个 “ 猜 猜 我 是 谁 ” 的 
晚会 游戏 。 你 需要 根据 它们 对 自己 的 描述 猜测 它们 的 身份 一 一 假 
设 它 们 摘 述 自己 时 说 的 都 是 真 话 。 请 在 下 面 的 空白 处 填写 每 位 成 
员 的 名 字 。 


参与 今 晚 游戏 的 成 员 有 : 
function. return 语 句 、 作 用 域 、 局 部 变 全 局 变 


量 、 按 值 传递 、 形 参 、 函 数 调用 、Math .zandom、 ee 
代码 重用 。 


我 是 alert 和 prompt 所 属 的 函数 类 别 。 


我 是 函数 最 擅长 实现 的 功能 。 
我 表示 变量 在 什么 地 方 可 见 
我 所 属 的 函数 在 ， 我 就 在 。 


5 分 钟 侦探 


9 


@eoe 


2 1 吕 





那个 盗窃 未 授 案 没 必要 调查 


给 成 事 不 足 的 雷 斯 垂 德 警 长 打 完 电话 ， 福 尔 摩 斯 在 壁炉 前 坐 下 ， 接 着 看 报纸 。 华 生 
充满 期 待 地 看 着 他 。 


和 福 尔 魔 斯 头 也 不 抬 地 说 : “和 干什么?” 

华 生 癌 : “和 雷 斯 牌 德 怎么 说 ? 

“ 哦 ， 他 说 他 在 银行 账户 中 找到 了 可 疑 的 流 谍 代码 。 
还 有 呢 ?” 华 生 极 力 地 掩饰 目 己 的 失望 


福尔摩斯 说 : “ 雷 斯 垂 德 通过 邮件 把 代码 发 给 了 我 ， 我 跟 他 说 这 个 案件 不 用 
查 了 。 徘 犯 犯 了 一 个 致命 的 错误 ， 根 本 不 可 能 把 钱 偷 走 。” 


你 是 怎么 知道 的 ? ” 华 生 问 。 


“要 是 你 懂 ， 这 显而易见 ，” 和 福尔摩斯 气 惯 地 说 ，“ 别 再 问 我 了 ， 让 我 把 这 张 
报纸 看 完 。 


往 尔 摩 斯 全 神 贯 广 地 看 着 报纸 ， 华 生 悄 悄 地 瞄 了 一 眼福 尔 摩 斯 的 手机 ， 打 开 雷 斯 垂 
德 发 来 的 邮件 ， 并 研究 其 中 的 代码 。 


刀 这 是 银行 账户 的 真正 实际 余额 ，。 








var balance = 10500; 


Var cameraOn = true; 


function steal(balance, amount) { 
cameraOn = false; 
if (amount < balance) ({ 
balance = balance - amount; 
} 
return amount; 


cameraOn = true; 


var amount = steal(balance, 1250); 


alert("Criminal: you stole " + amount + "!"); 


福尔摩斯 为 何 决 定 不 调查 这 个 案件 ”他 怎么 看 一 服 代码 就 知道 罪犯 根 杰 就 
不 可 能 把 线 丛 走 ?这 些 代码 有 什么 问题 胎 ? 





要 声明 函数 ， 使 用 关键 字 function， 
并 在 它 后 面 指定 函数 名 。 


将 函数 的 所 有 形 参 都 放 在 圆 拓 号 内 
如 宁 没 有 形 参 ， 残 使 用 空 圆 拓 号 。 


将 函数 体 放 在 花 括号 内 。 


函数 体 中 的 语句 在 你 调用 函数 时 执 
行 。 

函数 ， 0 数 名 ， 并 将 实 参 
传递 给 函数 的 形 参 (如 果 有 形 参 的 
话 ) 。 


函数 可 使 用 return 语 句 返 回 一 个 值 。 


函数 为 形 参 创建 局 部 变量 ， 并 创建 它 
需要 使 用 的 局 部 变量 。 

交 量 的 作用 域 要 么 是 全 局 的 (在 程序 
的 任何 地 方 都 可 见 ) ， 要 么 是 局 部 的 
(只 在 声明 它 的 函数 中 可 见 ) 。 


在 函数 体 开头 声明 局 部 变量 


如 果 忘 记 使 用 var 声 明 局 部 变量 ， 叱 
将 是 全 局 变量 ， 这 可 能 给 程序 市 来 意 
外 的 影响 。 

a 

可 通过 将 实 参 传递 给 形 参 来 自 定义 耳 
数 代 码 ， 还 可 使 用 不 同 的 实 参 来 获得 
不 同 的 结果 。 


函数 是 一 种 减少 乃至 消除 重复 代码 的 
极 佳 方式 。 
在 程序 中 ， 可 使 用 很 多 JavaScript 内 置 


Ey (alTert, PromptMath. 
random) 来 完成 工作 。 


使 用 内 置 函 数 意 味 着 使 用 既 有 代码 ， 
不 需要 你 自己 编写 。 


= 起 了 将 A 全 局 变 
JavaScript 文 件 的 开头 。 


We 





< 启 JavaScript 烧 党 游戏 


在 本 章 中 ， 你 养 成 了 函数 思维 。 现 在 请 开动 你 的 脑筋 ， 完 


成 下 面 的 填 字 游戏 。 


通 


横 问 

4. 在 国 数 体内 ， 形 参 就 像 什么 一 样 ? 

6. JavaScript 回 国 数 传递 实 参 时 采用 的 做 法 。 
10. 可 在 JavaScript 文 件 的 哪些 地 方 声明 函数 ? 
11. 没有 return 语 句 的 函数 返回 的 值 。 

13. 局 部 变量 在 什么 返回 时 消失 ? 


16. 如 果 你 忘记 了 再 明 局 部 变量 ， 它 将 被 视 为 什么 


(复数 形式 ) ? 
17. 局 部 变量 会 如 何 影响 同名 的 全 局 变量 ? 





吕 全 故国 面 面 硬 本 面 丁丁 


Im | 
| 


纵 回 

1. 在 任何 地 方 都 可 见 的 变量 拥有 全 局 什么 ? 

2. 使 用 函数 可 反复 地 对 代码 进行 什么 ? 

3. 传递 给 函数 的 实 参 将 赋 给 的 变量 。 

5. 用 于 从 函数 返回 值 的 语句 。 

7. 传递 给 函数 的 东西 。 

8. 重新 加 载 网 页 时 ， 部 将 被 重新 锣 始 化 的 东西 。 
9. 观察 代码 的 逐 行 执行 过 程 。 


12. 华 生 通 过 福尔摩斯 的 手机 中 的 什么 查看 了 银行 盗 
穹 代 码 ? 


14. 应 尽 可 能 使 用 的 变量 类 型 。 
15. 多 余 的 实 参 将 被 函数 怎么 样 ? 
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练习 答案 


@ 麻 笔 1 
兮 


es 


少 


var dogName = "rover"; 

var dogWeight = 23; 

If (dogWeight > 20) { 
console.log(dogName 

} else I 
console.log(dogName 

} 

dogName = "spot"; 

dogWeight = 13; 

If (dogWeight > 20) { 
console.log(dogName 

} else I 
console.log(dogName 

} 

dogName = "spike"; 

dogWeight = 53; 

If (dogWeight > 20) { 
console.log(dogName 

} else { 
console.log(dogName 

} 

dogName = "lady"; 

dogWeight = 17; 

If (dogWeight > 20) { 
console.log(dogName 

} else { 
console.log(dogName 


\ 主 入 太 


I 月 间 ] 


says 


says 


says 


says 


says 


says 


says 


says 


[Hf A. 重复 的 代码 多 得 不 得 了 ，。 


WOOF 


woof 


WOOF 


woof 


WOOF 


woof 


WOOF 


woof 


[MB. 如 果 要 修改 输出 的 显示 方式 或 添 
加 其 他 小 狗 属性 ， 将 需要 做 大 量 重 


复 的 工作 。 


WOOF'"); 


woof"); 


WOOF'"); 


woof"); 


WOOF'"); 


woof"); 


WOOF'™); 


woof"); 


单 地 分 析 下 面 的 代码 。 它 给 你 什么 样 的 感 咒 ? 
面 你 认为 合适 的 评价 ， 你 也 可 以 写 下 自己 的 评价 。 


请 选择 后 


我 们 选择 所 有 的 评价 。 


YC. 输入 起 来 很 繁琐 


ID. 可 读 性 不 佳 。 


KE. 看 起 来 这 位 开发 人 员 认为 体重 


可 能 随时 间 变 化 。 





下 面 是 一 些 调用 函数 park 的 代码 。 在 每 个 调用 旁边 指出 该 调用 是 人 否 会 导致 错误 ; 如 果 不 
会 ， 就 瑟 出 其 输出 。 人 党 案 如 下 。 


yark( no So -June'says woof woof 


bark("scottie", -1) ; scottie Sdy5 woof woof 


batk 芳 数 没有 通过 检查 来 确认 小 狗 的 
体重 大 于 零 ， 因 此 该 调用 显示 上 面 的 
输出 9 因为 一 1 小 于 20。 


bark("dino", 0, 0); dino says woof woof 


八 函数 bark 急 略 多 余 的 参数 0。 体 重 
为 杖 不 合理 ， 但 议 个 函数 调用 不 
会 导致 问题 。 


| fido says woof woof 
bark("fido", "20"); 
C 范 数 bark 将 字符 串 “20” 与 数字 20 进 行 比较 ， 它 不 比 
20 大 ， 因 此 显示 fido says woof woof。 (本 书后 面 将 介 
绍 JavaScript 如 何 对 “20” 和 20 进 行 比较 。) 
bark("lady", 10); lady says woof woof 


bark("bruno", 21); brunosays WOOF WOOF 


你 现在 的 位 置 ， 


练习 答案 
PE 2 ws A SS 
2 是 代码 冰 蕴 贴 和 案 


BE | 冰箱 上 贴 着 一 些 被 打 乱 的 JavaScript 代 码 。 你 能 将 这 些 
局 





代码 重组 为 一 个 生成 如 下 输出 的 程序 吗 ? 请 注意 ， 冰 
箱 上 的 有 些 代 码 可 能 是 多 余 的 ， 也 就 是 说 你 可 能 不 会 
用 到 所 有 的 冰箱 巾 。 答 案 如 下 。 


多 出 来 的 冰箱 贴 
if (temp < 60) { 6 


console.log("Wear a jacket"); 
else if (temp < 70) { [i;) 
console.log("Wear a sweater"); 


else { 


console.log("Wear t-shirt"); 


whatSshallIWear (50); 


whatShallIWear (80); 


whatShallIWear(60); 


JavaScript 控 制 全 
Wear a Jacket 
Wear a t-shirt 


Wear a sweater 





下 面 是 一 些 JavaScript 代 码 ， 其 中 包含 变量 、 
找 出 所 有 的 变量 、 函 数 、 实 参 和 形 参 ， 并 将 
如 下 。 








function dogYears(dogName, age) { 


Var years = age * 7; 


console.log(dogName + " is " + years + " years old"); 


} 
Var myDog = "Fido"; 


dogYears (myDog, 4); 


function makeTea(cups, tea) { 

console.log("Brewing " + cups + " cups of ”+ tea); 
} 
var guests = 3; 


makeTea(guests, "了 ar Grey"); 


function secret() { 
console.log("The secret of life is 42"); 


} 


secret(); 


function speak(kind) { 


var defaultSound = ""; 


If (kind == "dog") { 
alert("Woof"); 

} else IE (kind == "cat") { 
alert("Meow"); 

} else { 
alert(defaultSound); 


} 
var Pet = prompt("Enter a type of pet: "); 


speak (pet); 


函数 定义 和 函数 调用 。 你 的 任务 是 
和 手 它 们 填 在 右边 相应 的 万 框 中 。 管 案 


“2 
变量 


myDog, guests, pet， 


years, defaultSound 


纺 数 


dogYears, makeTea, 


secret, speak, 








内 鞋 号 数 


alert, console.log, 


prompt 


myDog, 4, guests， 
“EarlGrey ， pet, 

plus allthe string 

arguments to alert 


and console.log 


dogName, age, 


cups, tea, kind 




















练习 答案 


下 面 的 JavaScript 代 码 包 含 一 些 变 量 、 冰 数 定义 和 子 数 调用 。 你 的 任务 是 找 出 所 有 
的 实 参 、 形 参 、 局 部 变量 和 全 局 变量 ， 将 它们 填 在 右边 相应 的 方 框 中 ， 并 圈 出 被 
遮 住 的 变量 。 答 案 如 下 。 





var x = 32; 
Var = 44; - | | 

过 width, height, radius, 
var radius = 5; 

x, y, centerX, center™, 
Var centerX = 0; 别 忘 了 调用 函数 Area: +area, 
var centerY = 0; altert 时 传 入 的 Distance: + 
wy ‘ 

var width = 600; 闫 关 。 distance 


var height = 400; 





function setup(width, height) { 
centerX = width/2; 


width, height, x1, 
centerY = height/2; 


y1, x2,y2,r 


function computeDistance(xl1, yl, x2, y2) { 





Var dx = xl1 - x2; 
var dy = yl - y2; 

羡 但 
var d2 = (dx * dx) + (dy * dy); 局 部 库 量 


var d = Math.sqrt(d2); dx dv.d2.d 
x, dy, d2, d, 


return d; 
立 2 亦 旦 
} 局 部 变 重 area 赣 杰 住 一 ?|(area 7) 


了 全 局 变量 area。 





function circleAreal(r) { 
var area = Math.PI * r * 工 ; 


return area; 





信 A 至 

} 全 局 避 旦 
别 忘 了 area 和 x, y, radius, centerX, 
setup(width, height); 它 个 | 
P ght) 1 el centerY width, 
Var area = circleArea(radius); /A— 也 是 全 局 变量 。 , 
| | height, area, 
var distance = computeDistance(x, y, centerX, centeryY); 
distance 

alert("Area: " + area); 
alert("Distance: " + distance); 














无 名 亲 和 直 





答案 去 名 闭 置 (Thing 一 人 一 Ma 一 Jig) 误 计 得 非常 巧 阔 ， 它 能 够 发 出 叮当 直 (dclank) 、 沉 闷 的 金属 
声 (clunk) 和 构 构 声 (thunk) 。 安 到 谨 是 做 什么 的 呢 ? 我 们 也 说 不 清 ， 但 程序 员 宣 称 他 们 知 
着 其 中 的 工作 原理 。 你 能 破解 议 些 代码 ， 找 出 其 中 的 奥秘 吗 了 
JavaScrint 榨 制 合 
本 [控制 人 如 果 给 函数 thingamajig 传 递 5， 控 制 台 
答案 如 (120) clunk 将 显示 120 次 clunk 控制 台 可 能 简写 


为 (120) clunk， 如 上 所 示 ) ， 并 在 最 


120 
CO 后 显示 数字 120。 













ee 传 入 其 他 值 的 结 
JayaScript 控 制 合 果 呢 ? 
clank 
1 JavaScript 榨 制 合 Ts。 传 入 O 


thunk AS 
JayaScript 控 制 合 和 
(2) clunk 
< 二 ~ 传 入 2 
JavaScript 控 制 全 


(6) clunk SN 


6 
(24) clunk 

JavaScript 控 制 合 

(120) clunk 


24 


120 


这 些 结果 到 底 意 味 着 什么 呢 ? 据说 无 名 装置 是 好 奇 心 极 强 的 家 伙 发 明 的 ， 他 对 重新 
排列 单词 着 迷 。 你 知道 ， 对 于 单词 D0G， 可 重新 排列 为 60D、0GD、DG0、 GDO 和 和 
0DG。 固 此， 如 果 单 词 包含 三 个 字母， 无 名 装置 将 指出 这 些 字母 总 共有 6 种 不 同 的 
组 合 。 对 于 单词 mixes， 其 中 的 字母 有 120 种 不 同 的 组 合 ， 真 多 | 这 些 都 是 传闻 ， 我 
们 在 这 里 认为 这 种 无 名 装置 计算 的 是 数学 上 的 阶乘 ! 谁 知 道 呢 | 





搜索 “阶乘 ”了 解 更 多 信息 ! 
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练习 答案 


0 分 名 侦 将 福尔摩斯 为 何 决定 不 调查 这 个 案件 ?他 怎么 看 一 眼 代码 就 知道 
答案 Gf 罪犯 根本 就 不 可 能 把 钱 偷 走 ” 这 些 代 码 有 什么 问题 吗 ?答案 如 


小 涪 








化 “、 balance 是 一 个 全 局 变量 重 。 
Var balance = 10500; 


Var cameraOn = true; 
在 范 数 steal 中 ， 它 
被 这 个 形 参 遮 住 了 。 


function steal(balance, amount) { 


CameraOn = false; 


if (amount < balance) { 代 ~ 加 此 ， 在 函数 steal 中 修改 
balance = balance - amount:; balance 时 ， 并 不 会 改变 银 


行 账 己 的 实际 余额 。 


} 
返回 窃取 的 金额 。 return amount; 


CameraOn = true; 


} 









但 没有 根据 它 来 修改 账户 的 

实际 余额 ， 因 此 银行 账户 的 二 Var amount = steal(balance, 1250); 

实际 余额 与 原来 一 样 。 alert("Criminal: you stole " + amount + "!"); “~ 
罪犯 以 为 得 从 了 ， 


可 实际 上 没有 。 





罪犯 不 但 设 有 得 许 ， 还 忘记 了 将 监控 重新 打开 ， 给 警 
察 留 下 了 有 人 实施 犯罪 的 铁证 。 别 忘 了 ， 从 通 数 返 加 
时 ， 隙 数 将 停止 执行 ， 因 此 return 语 句 后 面 的 所 有 代码 


都 将 被 忽略 | 


122 第 3 章 


一 大 拨 Javascript 成 员 乔 装 打 扮 ， 正 在 玩 一 个 “ 猜 猜 我 是 谁 ”的 晚 
会 游戏 。 你 需要 根据 它们 对 自己 的 描述 猜测 它们 的 身 侈 
它们 描述 自己 时 说 的 都 是 真 话 。 请 在 下 面 的 空白 处 填写 每 位 成 员 
的 名 字 。 


参与 今 晚 游戏 的 成 员 有 : 


function、 实 参 、return 语 句 、 作 用 域 、 局 部 变量 、 全 局 变 
量 、 按 值 传递 、 形 参 、 函 数 调 用 、Math.zrandom、 内 置 函 数 、 











代码 重用 。 
我 被 传递 给 函数 。 实 参 
我 回调 用 函数 的 代码 返回 值 。 return 语 句 
我 是 最 重要 的 关键 字 。 function 
我 获得 实 参 的 值 。 形 参 
我 意味 着 创建 副本 。 控 值 传递 
我 在 什么 地 方 都 可 见 。 全 局 变量 
我 是 调用 函数 的 近义词 。 函数 调用 
我 是 一 个 与 对 象 相关 联 的 函数 。 Math.random 
我 是 alert 和 prompt 所 属 的 函数 类 别 。 内 置 函 数 
我 是 函数 最 擅长 实现 的 功能 。 代码 重用 
我 表示 变量 在 什么 地 方 可 见 作用 域 
我 所 属 的 函数 在 ， 我 就 在 。 局 部 变量 
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4 让 数据 排 排 坐 


* 逆 组 


二 时 = 


3 2 Pe 
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在 JavaScript 中 ， 并 非 只 有 数字 、 字 符 串 和 布尔 值 。 J 
JavaScript 代 码 时 ， 使 用 的 都 是 基本 类 型 (简单 字符 串 、 数 字 和 布尔 值 ) ， 
"Fido"、23 和 true。 使 用 基本 类 型 可 完成 很 多 工作 ， ee 
多 数据 ， 如 购物 车 中 的 所 有 商品 、 播 放 列 表 中 的 所 有 歌曲 、 一 系列 恒星 及 其 
亮度 或 整个 产品 目录 ， 为 此 ， 需 要 更 强大 的 工具 。 对 于 这 种 按 顺序 排列 的 数 
据 ， 可 使 用 JavaScript 数 组 来 存储 。 本 章 将 介绍 如 何 将 数据 加 入 数组 、 如 何 传 

递 数 组 以 及 如 何 操作 数组 。 本 书后 面 将 介绍 其 他 组 织 数据 的 方式 ， 但 现在 先 
从 数组 着 手 吧 。 


泡 泡 玩具 反 斗 城 公 司 





你 能 帮助 泡 泡 玩具 反 斗 城 公司 吗 


来 认识 一 下 泡 泡 玩 具 反 斗 城 (Bubbles-R-Us) 公司 。 这 家 公司 孜 
孜 不 倦 地 研究 ， 旨 在 让 泡 泡 魔 棒 和 袍 泡 机 能 够 吹出 最 好 的 泡 泡 。 
今天 ， 公 司 要 对 多 个 新 配方 的 “ 泡 泡 因 子 ” 进 行 测 试 ， 确 定 各 个 
配方 都 能 生成 多 少 个 泡 泡 。 下 面 是 得 到 的 测试 数据 。 


~ ~ 上 全 沟 淘 
测试 每 个 泡 泡 配 方 能 够 生成 多 分 个 亿 论 。 


每 个 试管 都 包含 i | wl | 1 
稍微 不 同 的 配方 ， 
并 都 贴 上 了 标签 


EI 
0~9。 






ye, 


1 1 7174 f+ 4 f 和 1 
60 50 60 58 54 54 58 50 52 wad 





pe i 





当然 ， 你 应 该 将 这 些 数据 都 输入 JavaScript， 以 便 能 够 编写 代码 来 
进行 分 析 。 但 数据 很 多 ， 如 何 编写 处 理 这 些 数 据 的 代码 呢 ? 


让 数据 排 排 坐 


如 何 使 有 JavaScript 表示 多 个 值 


你 知道 如 何 使 用 JavaScript 来 表示 单个 值 ， 如 字符 串 、 数 字 和 布尔 值 ， 但 如 何 表示 多 
个 值 (如 10 个 配方 的 泡 泡 因子 得 分 ) 呢 ? 使 用 JavaScript 数 组 。 数 组 是 一 种 可 存储 很 多 
值 的 JavaScript 数 据 类 型 。 下 面 的 JavaScript 数 组 存储 了 所 有 的 泡 泡 因子 得 分 : 





var scores = [60, 50, 60, 58, 54, 54, 58, 50, 52, 54]; 


gy 它们 组 合 在 一 起 ， 存 储 


在 一 个 数组 中 ， 并 被 赋 给 变量 scores。 
可 将 所 有 这 些 值 视 为 一 个 整体 ， 也 可 在 需要 时 访问 其 中 的 各 个 值 ， 如 下 所 示 。 


权 访 问 数组 的 元 素 ， 我 们 使 用 这 样 的 语法 : 数 请 注意 ， 数组 的 索引 从 O 开 始 。 因此 ， 第 一 个 配方 
组 变量 名 加 上 用 方 括 号 括 起 的 元 素 索 引 。 / 为 0 号 配方 ， 其 得 分 存储 在 scores[0] 中 ; 同 理 ， 第 


~ 三 个 配方 为 2 号 配方 ， 其 得 分 存储 在 scores[2] 中 。 


var solution2 = scores[2]; 


alert("Solution 2 produced " + solution2 + " bubbles."); 







Solution 2 produced 60 bubbles. 





我 的 2 号 配方 绝对 是 最 好 的 。 


泡 泡 玩具 反 斗 城 
公司 的 一 位 泡 记 


=) 
学 家 。 
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数组 简介 


数组 的 工作 原理 


问 钨 泡 玩 具 反 斗 城 公司 伸 出 援手 前 ， 明 们 先 把 数组 弄 明白 。 前 面 说 
过 ， 可 使 用 数组 来 存储 多 个 值 《而 不 像 变 量 那样 只 能 存储 一 个 值 ， 
如 一 个 数字 或 一 个 字符 串 ) 。 当 需要 将 类 似 的 东西 (如 泡 泡 因子 得 
分 、 冰 湛 淋 口味 、 白 天 的 温度 或 一 组 判断 题 的 千 案 ) 编组 时 ， 通 前 
使 用 数组 。 有 了 一 系列 要 编组 的 值 后 ， 就 可 创建 一 个 数组 来 存储 它 
们 ， 并 在 需要 时 访问 数组 中 的 这 些 值 。 





如 何 创 建 数 组 
假设 你 要 创建 一 个 存储 冰淇淋 口味 的 数组 ， 可 以 这 样 做 : 注意 到 使 用 了 把 号 来 分 
/ 隅 数组 的 各 个 元 素 。 
var flavors = ["vanilla", "butterscotch", "lavender", "chocolate", "cookie dough"]; 
将 这 个 数组 赋 给 使 用 字符 [指定 数 的 使 用 字符 ] 指 定 部 
变量 flavors。 组 的 开始 位 置 。 Be 组 的 结束 位 置 。 





创建 数组 时 ， 每 个 元 素 都 放 在 特定 的 位 置 (索引 ，index) 。 在 数 
组 flavors 中 ， 第 一 个 元 素 "vani1l1la" 位 于 索 310 处 ， 第 二 个 元 素 
"butterscotch" 位 于 索引 1 处 ， 依 此 类 推 。 下 面 是 一 种 看 待 数 组 的 方 








式 。 
数组 将 这 些 值 都 
收集 到 一 起 。 x  、 2 59° 





| 人 人 数组 的 每 个 索引 处 

flavors 这 个 数组 被 由 SR 都 存储 着 一 个 值 ， 
给 一 人 评 虹 每 个 值 都 有 些 
eis 引号 ， 而 索引 
一 己 从 0 开始 。 


让 数据 排 排 坐 


如 何 沪 问 数组 元 素 


数组 的 每 个 元 素 部 有 索引 ， 这 是 你 访问 和 修改 数组 中 值 的 钥匙 。 要 访问 元 素 ， 
只 需 在 数组 变量 名 后 面 加 上 用 方 括号 括 起 的 索引 ; 在 可 以 使 用 变量 的 任何 地 
方 ， 都 可 使 用 这 种 表示 法 : 








它 表 示 数 组 flavors 的 索引 2 处 的 值 ( 即 “lavender”) 
var flavorOfTheDay = flavors[2]; 将 这 个 值 赋 给 了 变 重 flavorOfTheDay。 


》 


要 获取 数组 中 的 元 素 ， se ) 6 
na 。 nd A a | 将 flavors[2] 中 的 值 赋 给 flavorOfTheDay。 


A 


CPP 
[20 
2 


fla be bo 


| 


一 





修改 数组 元 素 
还 可 使 用 数组 索引 来 修改 数组 中 的 值 : 


将 索引 3 处 的 值 设置 为 新 值 “vanilla 


flavors[3] = "vanilla chocolate chip"; ps chocolate chip (原来 为 “chocolate ) o 
因此 ， 执 行 这 行 代 码 后 ， 数 组 flavors 类 似 于 wo 
a C 
下 面 这 样 。 < 
\2 





C) 


多 
的 值 。 
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获取 数组 长 度 


确定 数组 的 长 度 


假设 有 人 给 了 你 一 个 非常 大 的 数组 ， 其 中 包含 重要 的 数据 。 你 知道 它 包 
含 什么 内 容 ， 但 可 能 不 知道 它 到 底 多 长 。 所 季 每 个 数组 都 有 属性 length。 
第 5 革 将 更 详细 地 讨论 属性 及 其 工作 原理 ,但 就 现在 而 言 ， 你 只 需 知 道 属 
性 是 一 个 与 数组 相关 联 的 值 即 可 。 下 面 演 示 了 如 何 使 用 属性 length。 











每 个 数组 都 有 属性 length， 指 出 要 获取 数组 的 长 度 ， 可 使 


了 数组 当前 包含 多 少 个 元 素 。 用 数组 名 、 句 点 和 length。 
-NN / 
Var numFlavors = flavors.length; 
数组 包含 5 个 元 素 ， 因 此 属性 length 的 值 为 5。 
现在 ，numFlavors 存 储 了 数组 、 
包含 的 元 素数 (这 里 为 5) 。 A Vy VY Ry 
SS S dy 
OO 






请 注意 ， 数 组 索引 从 0 开始， 因此 数组 
的 长 度 总 是 比 最 后 一 个 索引 小 1。 


下 面 的 products 数 组 存储 了 Jenn & Berry 销 售 的 各 种 冰淇淋 口味 。 
这 些 冰 淇 淋 口 味 是 按 制作 顺序 添加 到 数组 中 的 ， 请 补 全 下 面 的 代 
码 ， 找 出 最 后 制作 的 冰淇淋 口味 。 


var products = ["Choo Choo Chocolate", "Icy Mint"，"Cake Batter", "Bubblegum"]; 


var last = 


. 
r 


Var recent = products[last]; 





让 数据 排 排 坐 












试 试 我 新 推出 的 自动 造句 
应 有 程序 吧 ， 你 将 像 老 板 和 市 场 
营销 人 员 一 样 巧 乔 如 和 但。 


下 面 是 久 手 可 热 的 自动 造 
句 (Phrase-o-Matic) 应 用 
程序 的 代码 ， 你 能 明 自 它 
是 做 什么 的 吗 ? 


<Idoctype html> 


<html lang="en"> 你 认为 第 1 章 的 商务 应 用 程序 不 够 正 
<head> 式 ? 如 果 你 要 向 老板 展示 一 流 的 应 用 
<title>Phrase-o-matic</title> 程序 的 话 ， 试 试 这 个 吧 。 


<meta charset="utf-8"> 
<script> 


function makePhrases() { 


var wordsl ["24/7", "multi-tier", "30,000 foot", "B-to-B", "win-win"]; 
Var words2 = ["empowered", "value-added", "oriented", "focused", "aligned"]; 


Var words3 = ["process", "solution", "tipping-point", "strategy", "vision"]; 


Var randl Math.floor(Math.random() * wordsl.length); 


var rand2 Math.floor(Math.random() * words2.length); 


Var rand3 = Math.floor(Math.random() * words3.length); 


Var phrase = wordsl[randl] + " " + words2[rand2] + " " + words3[rand3]; 


alert(phrase); 
} 
makePhrases(); 
</script> 
</head> 
<body></body> 
</html> 
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自动 造句 程序 代码 


自动 造句 应 膨 程序 


但 愿 你 已 经 明白 了 ， 这 些 代 码 是 为 创业 公司 推出 下 一 个 广告 
语 的 绝 佳 工具 。 它 曾 推 出 了 成 功 的 厂 告 语 Win-win value-added 
solution 和 24/7 empowered process， 未 来 极 有 可 能 推出 其 他 成 
功 的 广告 语 。 来 看 看 这 些 代码 的 工作 原理 吧 。 








首先 ， 我 们 定义 了 函数 nakePhrases。 我 们 可 根据 需要 调用 这 个 函数 任意 
多 次 ， 以 造 出 想 要 的 句子 。 


ee 定义 可 在 后 面 调用 的 函数 makePhrases。 
function makePhrases() ({ 
2 一 一 一 makePhrases 的 代码 都 放 在 这 里 ， 我 们 稍 后 将 介绍 它们 。 


} 
ee 调用 函数 makePhrases 一 次 ， 但 如 
果 需 要 多 个 句子 ， 可 调用 它 多 次 。 


人 @) 现在 可 以 编写 函数 nakePhrases 的 代码 了 。 首 先 创建 三 个 数组 ， 每 个 都 存储 了 用 来 造 
名 的 单词 。 在 下 一 步 中 ， 我 们 将 从 每 个 数组 中 随机 选择 一 个 单词 ， 以 造 出 一 个 包含 三 个 


单词 的 句子 。 
C 变量 words1， 用 于 存储 第 一 个 数组 。 


var Wordsl = ["24/7", "multi-tier", "30,000 foot", "B-to-B", "win-win"]; 


在 这 个 数组 中 添加 5 个 字符 串 。 
尔 可 将 它们 换 成 最 时 旷 的 词语 。 


Var words2 = ["empowered", "value-added", "oriented", "focused", 


Var words3 = ["process", "solution", "tipping-point", "strategy", 


/ 改 。 这 是 另外 两 个 包含 单词 的 数组 ， 将 
它们 赋 给 了 变量 words2 和 words5。 


"aligned"]; 


"vision"]; 


让 数据 排 排 坐 


生成 三 个 随机 数 ， 以 随机 地 选择 三 个 用 于 造句 的 单词 。 第 2 音 说 过 ，Matnh . 
random 生 成 一 个 0 一 1 (不 包括 1) 的 数字 。 通 过 将 其 乘 以 数组 的 长 度 ， 并 使 用 
Math.floor 将 结 来 向 下 圆 整 ， 即 可 得 到 一 个 位 于 0 和 数组 长 度 减 1 之 间 的 整数 。 





rand1 将 是 一 个 位 于 O 和 数组 
忆 words1 的 最 后 一 个 需 引 之 间 


var zandlL = Math.floor(Math.random() * wordsl.length); 


的 整数 。 
Var rand2 = Math.floor(Math.random() * words2.length); 和 


rand2 和 rand3 与 此 类 似 。 


Var rand3 = Math.floor(Math.random() * words3.length); 


将 随机 选择 的 单词 拼接 起 来 (并 在 单词 之 间 添 加 空格 ， 以 提高 可 读 性 ) ， 生 成 
时 散 的 广告 语 。 


将 每 个 随机 数 用 作 包 含 


定义 另 一 个 用 于 存储 广告 语 的 变 重 。 Za 


Var Phrase = wordsl[randl] + " " + words2[rand2] + " " + words3[rand3]; 


G) 束 要 大 功 告 成 了 : 有 了 广告 语 ， 只 需 将 其 显示 出 来 即 可 。 为 此 ， 我 们 像 往 笛 那 
样 使 用 alert。 


alert(phrase); 








(6) 编写 最 后 一 行 代码 后 ， 再 看 一 眼 所 有 的 代码 ， 享 受 享受 成 就 感 ， 
再 在 六 蜗 姻 中 加 载 它们 。 来 试 贺 一 下 ， 欣 贰 一 下 生成 的 广告 语 。 


这 是 我 们 运行 时 24/7 oriented strategy 
五 | 
生 及 的 广 告 语 ， 
UL 一 国生 








{ 只 需 不 断 重 新 加 载 网 页 ， 就 能 生成 元 穷 无 尽 的 创 
炎 公 司 1 千 语 。 (准确 地 说 ， 并 非 无 穷 无 尽 的 ， 
但 完全 实现 了 让 简单 代码 油 动 人 心 的 目标 | ) 


你 现在 的 位 置 ， 


天 于 数组 的 问题 


人 
旧 ] : 数组 中 元 素 的 排列 顺序 重要 吧 ? 


AAA ， 

只 ， 在 大 多 数 情况 下 都 很 重要 ， 但 
也 要 看 情况 。 在 泡 泡 玩 具 反 斗 城 公司 
的 配方 得 分 数组 中 ， 排 列 顺序 很 重要 ， 
因为 该 数组 的 索引 指出 了 得 分 对 应 的 
配方 ， 如 0 号 配方 的 得 分 为 60， 该 得 分 
存储 在 索引 0 处 。 如 果 改 变 该 数组 中 得 
分 的 排列 顺序 ， 将 导致 实验 失败 ! 然 
而 ， 在 有 些 情况 下 ， 排 列 顺序 可 能 
关 紧 要 。 人 例如， 使 用 数组 来 存储 一 系 
列 随 机 选择 的 单词 时 ， 你 不 关心 这 些 
单词 的 排列 顺序 ， 因 此 它们 在 数组 中 
按 什么 样 的 顺序 排列 都 无 所 谓 。 但 如 
果 你 要 按 字 母 顺 序 排列 它们 ， 那 么 排 
列 顺序 就 很 重要 。 固 此， 排列 顺序 是 
和 否 重 要 完全 取决 于 你 要 如 何 使 用 数组 。 
你 可 能 发 现 ， 使 用 数组 时 ， 排 列 顺序 
有 关系 比 无 关 紧 要 的 可 能 性 更 大 。 


® 
人 o] ; 在 一 个 数组 中 ， 可 存储 多 少 个 
元 素 ? 
A 六 
只 。 从 理论 上 说 ， 你 想 存 储 多 少 就 
能 存储 多 少 ; 但 实际 上 ， 可 存储 的 元 
素数 受制 于 计算 机 的 内 存量 。 每 个 数 
组 元 素 都 要 占据 一 定 的 内 存 空间 。 别 
忘 了 ，JavaScript 代 码 是 在 浏览 器 中 运 
行 的 ， 而 浏览 器 只 是 计算 机 运行 的 众 
多 程序 之 一 。 如 果 你 不 断 地 在 数组 中 
添加 元 素 ， 最 终 将 耗 尽 内 存 空 间 。 然 
而 ， 可 在 数组 中 添加 的 最 大 元 素数 
即使 达 不 到 数 百 万 个 ， 也 可 达到 数 千 
个 ， 有 具体 数量 取决 于 元 素 的 类 型 ; 这 
足以 满足 大 多 数 情况 下 的 需求 。 别 忘 
了 ， 数 组 包含 的 元 素 越 多 ， 程序 的 运 
行 速度 就 越 慢 。 因 此 在 大 多 数 情况 下 ， 
都 应 将 数组 的 长 度 限 制 在 合理 范围 内 ， 
如 数 百 个 元 素 。 
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在 1 研一 
三 二 4 己 
ZI TT oo 


人 
扣 ] : 可 以 创建 空 数组 吧 ? 


AAA ， 
吟 ' ， 可 以 。 事 实 上 ， 稍 后 你 就 将 看 
到 一 个 使 用 空 数 组 的 示例 。 要 创建 空 
数组 ， 可 这 样 编写 代码 : 

Var emptyArray = |[ |]; 
如 果 数 组 开始 是 空 的 ， 可 在 以 后 添加 
元 素 。 


人 | : 到 目前 为 止 ， 数 组 元 素 要 么 是 
字符 串 ， 要 么 是 数字 ， 可 将 其 他 的 值 
添加 到 数组 中 吗 ? 


A 和 

只 可以。 事实 上 ， 在 数组 中 几乎 
可 存储 任何 JavaScript 值 ， 包 括 数 字 、 
字符 串 、 布 尔 值 、 其 他 数组 以 及 后 面 
将 介绍 的 对 象 。 


虽 ;一 个 数组 中 所 有 值 的 类 型 都 必 
须 相同 吗 ? 


A 和 

只 ， 不 用 ， 但 我 们 通常 在 一 个 数组 
中 存储 相同 类 型 的 值 。 不 同 于 众多 其 
他 的 语言 ，JavaScript 不 要 求 一 个 数 
组 中 所 有 值 的 类 型 都 相同 。 然 而 ， 如 
果 在 同一 个 数组 中 存储 不 同类 型 的 值 ， 


使 用 这 些 值 时 就 得 特别 小 心 。 其 原因 
如 下 : 假设 你 有 数组 [1， 2， "fido", 


4， 5]， 并 编写 代码 来 检查 其 中 的 值 是 
二 大 于 2 关 休 人格 才 全曲 O 天 大 大 于 2 
时 结果 将 如 何 呢 ? 为 避免 所 做 的 事情 
不 合理 ,在 代码 中 使 用 该 数组 中 的 每 
个 值 之 前 ， 必 须 检 查 其 类 型 。 你 当然 
能 够 对 类 型 进行 检查 (这 将 在 本 书后 
面 介绍 ) ， 但 一 般 而 言 ， 在 数组 中 存 
储 类 型 相同 的 值 时 ， 处 理 起 来 将 更 容 
易 、 更 安全 。 


[9) 。 如 果 试 图 访问 索引 太 大 或 太 小 
(如 小 于 0) 的 数组 元 素 ， 结 果 将 如 何 ? 


A ， 

吟 "” ， 如 果 你 有 一 个 下 面 这 样 的 数组 ， 
并 试图 访问 a[10] 或 a[-1]， 得 到 的 结 
采 将 是 undefined: 

[Ly -2 


本 六 汪 三 2 


因此 ， 你 要 么 确保 访问 数组 元 素 时 使 
用 的 索引 有 效 ， 要 么 通过 检查 确认 获 
得 的 值 不 是 undefined,， 


》 

人 o] ;我 知道 ， 可 使 用 索引 0 来 获取 数 
组 的 第 一 个 元 素 ， 但 如 何 获取 最 后 一 
个 数组 元 素 呢 ? 我 必须 始终 准确 地 知 
道 数组 包含 多 少 个 元 素 吗 ? 


AAA ， 

份 ， 可 利用 属性 length 来 获取 最 后 
一 个 数组 元 素 。 你 知道 ， 属 性 length 
总 是 比 数组 的 最 后 一 个 索引 大 1， 因 此 
要 获取 最 后 一 个 数组 元 素 ， 可 编写 这 
样 的 代码 : 
myArraylmyArrayléngth = 1]; 


上 述 JavaScript 代 码 获取 数组 的 长 度 ， 
将 其 减 1， 再 获取 该 索引 处 的 元 素 。 固 
此 ， 如 果 数 组 有 10 个 元 素 ， 这 行 代码 
将 获取 索引 9 处 的 元 素 ， 这 正 是 你 布 户 
的 。 每 当 你 要 获取 数组 的 最 后 一 个 元 
素 ， 又 不 知道 数组 到 底 和 包含 多 少 个 元 
素 时 ， 都 可 使 用 这 种 技巧 。 


回 到 泡 泡 玩 具 反 斗 城 公 司 


( 


钨 泡 玩 具 反 斗 城 CEO 









哩 ， 很 高 兴 大 家 来 到 这 里 
我 们 刚 对 大 量 新 泡 泡 配 方 进行 了 测 
试 ， 下 面 是 所 有 和 这些 配方 的 得 分 。 我 鱼 
需 你 们 帮助 我 理解 这 些 数据 。 我 期 待 你 
们 编写 代码 ， 生 成 下 面 描述 的 报表 。 












var Scores = [60, 
58, 
34, 
69, 
46, 


41, 


60， 
52, 
51, 
66, 
57, 
55, 


54, 
48, 
44, 
52， 
44, 
51, 


54, 
69， 
51, 
61, 
18， 
44]; 


我 们 需要 生成 的 报表 。 [ 
0 首 泡 泡 配 方 的 得 分 


让 我 能 够 迅速 决定 该 玉 


人 需 让 机 村 人 全 | E093 


一 个 下 
种 泡 认 本 尔 能 编写 生 记 这 种 报表 的 代码 
一 一 泡 泡 玩 具有 反 斗 城 CEO 


名 凡 





pubble solution #0 $Core: 60 
HibDble stlution | #1, scCorFe: $0 
Bubble solution #2 $Cote: 60 
一 其 他 泡 泡 配 方 的 得 分 。 
Bubblesr tests:r 36 
Hicgnest bubople Sore. S| 
qoTlUutions With nighest, SCore: 非 TTL #18 
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泡 泡 配方 得 分 报表 


咱们 来 详细 研究 该 CEO 需 要 的 报表 。 


能 够 迅速 决定 该 采 


0 个 文 样 的 报表 我 
和 这 种 报表 的 代码 吗 ? 


用 哪 种 泡 泡 配方 | 尔 能 编写 生 
光 泡 玩具 反 斗 城 CEO 








我 们 需要 列 出 所 有 


Sp、 BUBble solution #0 score: 60 
的 配方 及 其 得 分 。 


Bubble solution #1 score:, 50 

Bubble solution #2, score: 60 

其 他 泡 泡 配 方 苹 

接 下 来 ， 我 们 需要 打 TT 得 帮 的 


印 测试 的 泡 抱 配方 数 。 
Bubbles tests: 36 


A Highest bule SCoOre: 69 
doliutions With highestl score:l #1i1t, #18 
最 后 ， 我 们 需要 打印 


2 
最 高 得 分 以 及 所 有 得 
分 最 





花 点 时 间 想 想 如 何 制作 这 个 泡 泡 得 分 报表 。 考 虑 如 何 正确 地 输出 报表 的 各 项 内 容 ， 并 将 你 的 想法 
记录 在 下 面 。 
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咱们 来 看 看 如 何 编写 制作 
这 个 报 表 的 代码 。 








Judy: 我 们 首先 要 做 的 是 显示 所 有 的 得 分 及 其 配方 
Ee 

Joe: 配方 写 其 实 就 是 得 分 在 数组 中 的 索引 ， 对 吧 ? 
Judy: 完全 正确 。 

Frank: 让 我 想 想 。 因 此 ， 我 们 需要 获取 每 个 得 分 ， 
打印 其 索引 ( 即 配 方 号 )” ， 再 打印 相应 的 得 分 。 


>》 Judy， 你 说 的 没 错 ， 而 得 分 其 实 就 是 数组 中 相应 
Frank Judy Joe 的 什 

















Joe: 因此 ， 对 于 10 号 配方 ， 其 得 分 为 scores[10]。 

Judy: 没 饭 。 

Frank: 但 得 分 很 多 ， 如 何 编 写 输出 所 有 得 分 的 代码 呢 ? 

Judy: 使 用 磊 代 。 

Frank: 哦 ， 你 古 说 使 用 while 循 环 什 么 的 ? 

Judy: 对 ， 我 们 从 堆 明 历 到 数组 长 度 …… 哦 ， 走 数组 长 度 减 1， 以 遇 历 所 有 的 值 。 

Joe: 这 听 起 来 完全 行 得 通 。 咱 们 来 编写 一 些 代 码 ， 我 想 我 们 已 经 知道 该 如 何 做 了 。 
Judy: 我 也 是 这 么 认为 的 ! 咱们 来 编写 代码 吧 ， 稍 后 再 来 商谈 如 何 处 理 报表 的 其 他 部 


ge 
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迭代 数组 


如 何 和 迭代 数组 
你 的 目标 是 生成 类 似 下 面 的 输出 : 


Bubble solution #0 score: 60 
Bubble solution #1 score: 50 


和 这 里 是 5 一 54 号 配方 的 得 分 。 为 
2 节省 纸张 (如 果 你 阅读 的 是 电子 
版 ， 就 是 节省 比特 ) ， 这 里 省 


l 0 
Bubble solution #35 score: 44 略 孔 1。 


为 此 ， 我 们 依次 输出 索引 0、1、2 等 处 的 得 分 ， 直 到 到 达 数 组 的 最 后 一 
个 索引 。 你 知道 如 何 使 有 while 循环， 咱们 来 看 看 如 何 使 用 它 来 输出 
所 有 的 得 分 | RK、 稍 后 将 介绍 一 种 更 好 的 方式 。 
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60 50 60 58 54 54 58 50 52 54 
ss 和 入 


var Scores = [60, 50, 60, 58, 54, 54, 58, 50, 52, 54, 48, 69, 


34, 55, 51, 52, 44, 51, 69, 64, 66, 55, 52, 61, 


46, 31, 57, 52, 44, 18, 41, 53, 55, 61, 51, 44]; 


我 们 将 在 下 面 的 循环 中 使 用 这 个 变量 来 存储 要 输出 的 字符 串 。 


var output; 


[一 创建 一 个 用 于 存储 当前 索引 的 


站 皇 . 
久 重 。 


var i = 0; 作 “~ 只 要 索引 小 于 数组 的 长 度 ， 就 继续 


AN 


while (i < Scores.LIength) { 


output = "Bubble solution #" + i+" score: " + scores[il]; 
console.log(output); NN 
| 创建 一 个 作为 一 行 输 出 的 字符 
i1=1i1+1; 串 ， 其 中 包含 配方 号 ( 它 刚 好 
} 是 数组 索引 ) 和 得 分 。 
使 用 console.log 输 
出 这 个 字符 串 。 


最 后 ， 在 再 次 循环 前 将 索引 加 1。 
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= 伐 碚 冰 第 贴 


| 我 们 编写 了 一 些 代 码 ， 用 于 找 出 哪些 品 
味 的 冰淇淋 中 有 泡泡糖 。 我 们 使 用 冰 
” 箱 由 将 所 有 的 代码 都 正确 地 由 到 了 冰箱 
上 ， 但 这 些 冰 箱 贴 都 脱 沙 了 。 你 的 任务 
是 将 它们 重新 贴 好。 请 注意 ， 其 中 有 一 
些 冰 箱 贴 是 多 余 的 。 请 查看 本 章 末 尾 的 
答案 ， 再 继续 往 下 阅读 。 
















1Late'"， 
cts = ["Choo Choo Choco 
ee "ICY Mint", "Cake Batter ， 


"Bubblegum"] 7 


var hasBubbleGum = [false, 
false, 
false, 


truel]; 


console.log(products[i] + 
" contains bubble gum"); 


这 是 我 们 期 望 
的 输出 。 yy 


JavaScript 控 制 合 










在 这 里 重新 排列 冰箱 贴 Bubblegum contains bubble gum 
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使 用 for 循 环 进行 迭代 


Mris® Ad r 罗 
守 寺 ， 还 有 一 种 更 好 的 数组 

送 代 方式 

实在 抱 菊 ， 都 到 第 4 草 了 ， 我 们 还 没有 介绍 £or 循 环 ， 真 不 取 相信 。 你 可 将 for 休 环 
视 为 vrhile 循 环 的 表亲 ， 它 们 的 功能 基本 相同 ， 只 是 for 人 循环 使 用 起 来 通 第 更 方便 
些 。 来 看 刚才 使 用 的 while 循 环 ， 我 们 将 演示 如 何 将 其 转换 为 for 循 环 。 





人 妨 、 首先 ， 我 们 初始 化 一 个 计数 器 。 
Mvyar Te — 0- 


while®El < es 然后 ， 我 们 在 一 个 条 件 表 达 式 中 检查 这 个 计数 器 。 
output = "Bubble solution #" + 工 + "score: " + scores[il]; 


console.log(output); 
@i ;i 我 们 还 指定 了 要 执行 的 循环 体 ， 
即 { 和 } 之 间 的 所 有 语句 。 


人 
最 后 ， 我 们 将 计数 器 加 1。 





如 霖 使 用 for 人 循环 ， 这 些 功 能 实现 起 来 将 容 多 得 多 。 下 和 面 就 来 看 看 。 


= 部 分 将 计数 器 加 1。 每 
号 三 部 分 。 第 一 第 三 
0 第 二 部 分 是 条 件 测试 。 每 次 循环 都 将 这 样 侯 ， 这 息 
for 循 环 以 关键 宁 广 种 初始 化 只 在 循环 开始 次 循环 时 都 将 执行 该 测试 ， 执行 完 循环 体 的 所 有 语 匀 扎 
O ~ 全 


2 一 ~ 0 来 大 京 结 S14 F 6 渤 行 的 。 
ix 打头。 前 执行 一 次 ， A . 
L、 @Y @ @ _ 
for (Var i = 0; 1 < scores.length.; =1+ 1) 1 
output = "Bubble solution #" +i+" score: " + scores[il]; 
console.log(output); 这 是 循环 体 。 注 意 到 际 了 
} 人 一 和 81 的 代码 移 到 for 语 
句 中 外 ， 其 他 方面 与 while 


循环 中 完全 相同 。 
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人 用 for 循 环 代 和 其 其 中 
en 如 果 你 需要 帮助 ， 请 参阅 前 一 页 
中 while 循 环 的 每 个 组 成 部 分 ， 看 看 它们 分 别 对 
应 于 for 循 环 的 哪个 部 分 。 
















var products = ["Choo Choo Chocolate", 
"Icy Mint", "Cake Batter", 


"Bubblegum"]; 


var hasBubbleGum = [false, 
false, 
false, 


truel]; 


if (hasBubbleGum[i]) [ 


console.log(products[i] + 
contains bubble gum"); 
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整合 代码 


编写 好 了 ， 
整合 起 来 。 


这 是 网 页 的 标准 HTML 内 容 。 需要 编写 
的 HTML 不 多 ， 只 需 为 嵌入 了 脚本 做 好 准 


<Idoctype html> 

2 O 
<html lang="en"> EE 备 工作 即 可 
<head> 


<meta charset="utf-8"> 


<title>Bubble Factory Test Lab</title> 
<script> 
var scores = [60, 50, 60, 58, 54, 54, 
58, 50, 52, 54, 48, 69, 
34, 55, 51, 52, 44, 51, 
69, 64, 66, 55, 52, 61, 
46, 31, 57, 52, 44, 18, 
41, 53, 55, 61, 51, 44]; 
var output; 
for (var i = 0; i < scores.length; i = 
output = "Bubble solution #" + i+ 
" Score: " + scores[i]; 


console.log(output); 


} 人 闪 下 来 ， 守 们 将 这 个 字符 可 输出 
x 全 疡 人 AK 2& ‘ 
</script> 到 控制 台 。 就 这 么 简单 | 该 尝试 
运行 这 些 代码 了 | 
</head> 
<body></body> 
</html> 


生成 报表 第 一 部 分 的 代码 都 


i + 1) { 








咱们 来 将 它们 





这 是 存储 泡 泡 配 方 得 分 的 数组 。 


Pe 


族 一 ~ 这 是 挝 代 所 有 泡 泡 配 方 得 分 的 for 循 环 。 


每 次 循环 时 都 创建 一 个 字符 串 ， 其 中 包含 的 
值 ( 泡 抱 配方 号 ) 和 scores[i] 的 值 ( 才 记 本 
方 的 得 分 ) 。 


(另外 ， 注 意 到 我 们 将 这 个 字符 串 的 内 容 放 在 
了 两 行 中 。 只 要 不 在 用 于 分 阳 字 符 串 的 配对 
引号 之 间 换 行 ， 就 没有 问题 。 在 这 里 ， 我 们 
在 一 个 拼接 运算 符 (+) 后 面 换行 ， 因 此 没有 
问题 。 请 一 定 完全 按 这 里 的 显示 输入 。) 
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测 读 报 表 
将 这 个 文件 保存 为 bubbles.html， 并 在 浏览 器 中 加 载 它 。 JavaScript 控 制 台 

确保 控制 台 可 见 (如 末 你 在 加 载 这 个 网 页 后 打开 控制 Bubble solution #0 score: 
人 台 ， 可 能 需要 重新 加 载 网 页 ) ， 欣 赞 欣 和 赏 你 为 泡 泡 玩 Bubble solution #1 score: 
有 具 反 斗 城 CEO 制 作 的 出 色 报 表 。 Bubble solution #2 score: 


Bubble solution #3 score: 
一 Bubble solution #4 score: 
Bubble solution #5 score: 
SCEO 要 求 的 顺序 完全 相同 。 Bubble solution #6 score: 
Bubble solution #7 score: 


—> Bubble solution #8 score: 


Bubble solution #9 score: 
能 够 在 一 个 报 表 中 看 到 所 有 Bubble solution #10 score: 
泡 泡 配 方 的 得 分 是 挺 好 的 ， 


up Bubble solution #11 score: 
但 要 找 出 最 高 得 分 还 是 很 难 . 


我 们 需要 处 理 其 他 报表 需求 Bubble solution #12 score: 
便于 找 出 最 佳 配 » | Bubble solution #13 score: 


Bubble solution #14 score: 
Bubble solution #15 score， 
Bubble solution #16 score: 
Bubble solution #17 score， 
Bubble solution #18 score: 
Bubble solution #19 score: 
Bubble solution #20 score: 
Bubble solution #21 score: 
Bubble solution #22 score: 
Bubble solution #23 score: 
Bubble solution #24 score: 
Bubble solution #25 score: 
Bubble solution #26 score: 
Bubble solution #27 score: 
Bubble solution #28 score: 
Bubble solution #29 score: 
Bubble solution #30 score: 
Bubble solution #31 score: 
Bubble solution #32 score: 
Bubble solution #33 score: 
Bubble solution #34 score: 
Bubble solution #35 score: 
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炉 边 谈话 





while 循 环 


开 什 么 玩笑 ! 我 是 JavaScript 中 最 通用 的 循环 结 
构 。 我 不 是 非得 使 用 傻乎乎 的 计数 项， 而 是 能 使 
用 任何 类 型 的 条 件 。 本 书 先 介绍 的 是 我 ， 还 有 人 
没有 注意 到 这 一 点 吗 ? 





还 有 ， 你 们 注意 到 了 吗 ? for 循 环 没 有 一 点 幽默 
感 。 我 是 说 ， 如 本 我 整 天 做 的 都 是 无 聊 的 迭代 ， 
我 猜 我 也 会 变 成 那样 。 


征 吗 ? 我 认为 这 不 可 能 征 真 的 。 


本 书 前 面 都 说 过 了 ，for 和 while 循 环 的 功能 
乎 相同 ， 这 怎么 可 能 呢 ? 


今 晚 主题 ，while 和 for 循 环 回答 “ 谁 更 重要 ”的 问题 


for 循 环 


我 不 喜欢 你 说 话 的 口气 。 


别 贫 了 。 可 你 注意 到 了 吗 ， 程 序 员 十 次 有 九 次 都 
会 使 用 for 循 环 。 


另外 ， 对 于 元 素数 固定 的 数组 ， 使 用 while 循 环 
进行 夺 代 是 宁 描 而 糟 糙 的 做 法 。 


啊 哈 ， 你 这 是 承认 了 我 们 之 间 的 差距 并 没有 那么 
大 吗 ? 


让 我 来 告诉 你 原因 。 


while 循 环 


根本 疫 有 你 说 得 那么 伶 张 。 我 见 到 的 大 多 数 欠 代 
甚至 不 包含 计数 大 ， 就 像 下 面 这 样 : 


while (answer != "forty-two") 


使 用 for 循 环 试 试 ! 


啊 ， 这 样 也 行 ， 真 难以 置信 。 


给 猪 涂 上 口红 ， 它 还 是 猪 。 


不 但 更 擅长 ， 代 码 也 更 漂亮 。 
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for 往 环 


使 用 while 循 环 时 ， 必 须 使 用 单独 的 语句 来 初始 
化 和 递增 计数 姻 。 大 刀 阔 着地 修改 代码 时 ， 如 条 
不 小 心 移 动 或 删除 了 这 些 语句 ， 可 能 市 来 极其 精 
糕 的 后 条 。 使 用 fo 循环 时 ， 这 些 代 码 都 封闭 在 
for 语 句 中 ， 程 序 员 看 得 清 清 楚楚 ， 想 不 小 心 修 


改 或 删除 它们 都 难 。 








设 问 题 : 


for (;answer != "forty-two";) 


当然 行 。 


你 就 会 要 贫嘴 ! 你 还 认为 你 更 擅长 处 理 一 般 性 条 
件 蚂 ? 


这 又 不 是 选美 比赛 。 
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别 这 人 么 史 咏 好 不 好 
你 编写 了 大 量 像 下 面 这 样 的 代码 : 


全 
假设 mylmportantCounter 包 多 要 


一 个 数字 9 WO。 


myImportantCounter = myImportantCounter + 1; 





Lm 这 条 语句 执行 完毕 后 ，mylmportantCounter 比 原来 大 1。 


算 符 (post-increment 


事实 上 ， 鉴 于 这 种 语句 很 常见 ， JavaScript 提 供 了 一 种 快捷 廊 式 ， ns 0 
operator) 。 这 个 运算 符 的 名 字 虽 然 奇 特 ， 但 实际 上 非常 简单 。 通 过 使 用 后 递增 运算 符 ， 可 将 上 述 代 


码 殖 换 为 下 面 的 代码 : 
只 需 在 变量 名 后 面 加 上 ++ 即 可 。 


y 


myImportantCountertt+; 
( 这 条 语句 执行 完毕 后 ，mylmportantCounter 比 原来 大 1。 


0 你 可 将 后 递减 运算 


只 需 在 变量 名 后 面 加 上 -- 即 可 。 
myImportantCounter--; 
人 文 条 语句 执行 完毕 后 ，mylmportantCounter 比 原来 小 1。 


为 何在 这 里 介绍 后 递增 运算 符 呢 ? 因为 它 和 常用 于 for 语 名 中。 下 面 来 使 用 后 递增 运算 符 ， 让 我 们 的 
代码 更 整洁 些 


使 用 后 递增 和 运算 符 重 新 编 写 Eor 循 环 


了 虽 们 来 重新 编写 代码 ， 并 通过 测试 来 确认 其 作用 与 以 前 一 样 : 


var Scores = [60, 50, 60, 58, 54, 54, 
58, 50, 52, 54, 48, 69, 
34, 55, 51, 52, 44, S51, 
69, 64, 66, 55, 52, 61, 
46, 31, 57, 52, 44, 18, 


41, 53, 55, 61, 51, 44]; 我 们 只 修改 循环 变量 的 弟 
的 、 
for (var i = 0; i < scores.length; i++) { 式 ， 使 用 后 说 增 运算 符 。 
Var output = "Bubble solution #" + i + 
" Score: " + scores[i]; 


console.log(output); 


快速 测试 
来 做 一 下 快速 测试 ， 确 认 使 用 后 递增 运算 符 也 可 行 。 保 存 文件 
bubbles.htm1， 并 重新 加 载 它 。 你 看 到 的 报表 应 该 与 以 前 一 样 。 





Java9cript 控 制 台 


Bubbje solution #0 score，60 
Bubble solution #1 score: 50 
Bubble solution #2 score: 60 


Bubble solution #34 score: 51 
报表 与 以 前 完全 一 样 。 R920 Dt 时 


L_ 一 一 
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增 方 





为 节省 篇 幅 ， 这 里 设 有 显 
示 所 有 配方 的 得 分 ， 但 
们 都 显示 到 了 控制 台中 。 
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报表 的 其 余部 分 


办 公 室 商人 火 ( 续 ) 









我 们 显示 了 bg 
得 分 ， 现 在 需要 生成 报表 的 其 






ee ea 
需要 确定 总 共 测 试 了 多 少 作 


-和光 帝 我 品 二 下 













下面 这 样 的 报表 - 寺 我 能 够 迅速 决定 该 采用 吕 
具 友 半 | 种 泡 泡 配方 | 从 能 编写 生成 这 种 报表 的 代码 
Se | 一 泡 泡 玩 具 反 斗 城 CE0 
、 > 日 ， Bubble Solution #0 Score: 60 
、 ; 文 很 简 单 ， 它 了 是 数 Probre sclera score: 50 
配方 O | Bubbie Solution #2 Score: 60 
组 scores 的 长 度 。 个 玫 售 兆 泡 配方 的 得 分 
全 我 们 还 必须 找 出 Bubbles tests: 36 
Joe 。 疫 钳 oO i Highest bubble Score: 69 
4 日 _ 园 . 下 Sa) | ] 
、 人 在 芭 | 和 Solutions with highest Score:; #11, #18 
最 高 得 分 ， 还 有 获得 
取 册 从 分 ， 
的 配方 。 


-eE I 晶 /人 N 
> 发 最 高 村 分 o 
二 务 最 环 手 。 咱 们 先 来 找 出 
J， 但 最 后 一 项 任务 最 
Judy: 是 的 , f 


> 起 来 不 错 。 、 ~ pp, 旦 襄 得 分 ， ` 面 我 来 
和 个 变量 ， 用 于 在 遍历 数组 期 间 存储 最 高 得 分 ， 下 
= 有 EE 上 一 让 全 旦 ， 
Judy: 为 此 ， 需要 
编写 一 些 伪 代码 。 








储 最 高 得 分 
pa 声明 一 个 用 于 存 


声明 变量 highScore， 并 将 其 设置 为 零 
请 . 
/ [一 站 res.length; 1t+ 二 二 月 A 得 从 号 
FOR 循环 : j=0; i<sco < pe de la 
Ey 入 的 得 分 sco 土 绝 从 ? 二 为 新 的 最 高 
显示 当前 泡 泡 配 方 的 得 否 更 高 ， 如 果 是 ， 就 将 其 作为 订 
IF scores[i]>highScore 2 得 分 。 
将 highscore 设 置 为 scores[i]; 
IF 语句 到 此 结束 
FOR 循环 到 此 结束 
显示 highScore 
一 人心 和 站 上 一 六 “这 项 任务 。 
很 好 ， 只 需 添加 儿 行 代码 就 可 完成 这 
Joe : 


首 民 区 二 
i ; 如 末 古 ， 束 将 其 
数组 元 素 时 a 

. 志 历 每 个 一 元 条 ? 和 显示 最 高 得 分 即日 

ee 高 得 分 。 人 循环 结束 后 ， 只 需 显示 最 高 

作为 妆 省 取 [ 本 人 契 


一 已 高 得 分 上 可 。 
< 循环 结束 后 ， 只 需 显示 最 高 得 分 即 
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请 补 全 下 面 的 代码 ， 以 实现 前 一 页 中 找 出 最 高 得 分 的 伪 代 码 ， 再 据 此 更 新 
bubbles.html 中 的 代码 ， 并 尝试 在 浏览 璐 中 重新 加 载 该 网 页 。 碍 看 控制 合 中 
的 结果 ， 并 据 此 填写 下 面 的 控制 合 显示 结果 中 空白 的 内 容 : 测试 的 泡 泡 配方 
数 和 最 高 得 分 。 查 看 本 章 末 尾 的 答案 ， 骨 接着 往 下 阅读 。 





var Scores = [60, 50, 60, 58, 54, 54, 
58, 50, 52, 54, 48, 69, 
34, 55, 51, 52, 44, 51, 
69, 64, 66, 55, 52, 61, 
46, 31, 57, 52, 44, 18, 
41, 53, 55, 61, 51, 44]; 


var highScore = ; L— 请 补 全 这 里 的 代码 。 


var output; 


for (var 1 0; i < scores.length; I++) { 
output = "Bubble solution #" + i+" score: " + scores[il]; 


console.log(output); 


IE (人 > highScore) { 
= scores[il]; 
} 
} 
console.log("Bubbles tests: " + ) 
console.log("Highest bubble score: "+ )s 


Javascript 控 制 合 


Bubble solution #0 score: 60 
Bubble solution #1 score: 50 
Bubble solution #2 score: 60 


Bubble solution #34 score: 51 


Bubble solution #35 score: 44 
请 补 全 这 里 的 控制 台 输 出 。 Bubbles tests: 


~ > Highest bubble score: 
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添加 最 高 分 









就 要 大 功 告 成 了 7! 余下 的 唯一 工 
作 是 找 出 得 分 最 高 的 配方 着 将 其 
打印 出 来 。 别 总 7 了 ， 得 分 最 高 的 
配方 可 能 有 多 个 。 












得 分 最 高 的 配方 可 能 有 多 个 。 需 要 存储 多 项 
内 容 时 ， 该 使 用 什么 呢 ? 当然 是 数组 。 是 不 
是 可 以 这 样 做 : 遍历 数组 scores， 找 出 得 分 
最 高 的 配方 ， 将 它们 加 入 一 个 数组 ， 再 在 报 
表 中 显示 该 数组 ? 绝对 可 以 这 样 做 ， 为 此 必 
须 学 习 如 何 新 建 一 个 空 数组 以 及 如 何在 这 个 
数组 中 添加 新 元 素 。 





这 是 我 们 尚未 完成 
的 报表 部 分 。 


一 我 画 需 二 个 下 面 这 样 的 报表 ,证 我 能 够 迅速 决定 该 有 
| ww 用 哪 种 泡 钨 配方 | 你 能 编写 生成 这 种 报表 的 代码 吗 ? 


\、 反 斗 起 y 
站 到 这 近 玩具 瓦 斗 城 CEO 


Bubble solution #0 score: 60 





Bubble solution #1 score: 50 
Bubble solution #2 score: 60 


< 一 一 其 他 泡 泡 配 方 静 得 分 - 
Bubbles tests: 36 

Highest bubble score: 69 

Solutions with highest score: 11, 18 
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创建 空 数组 并 在 其 中 添加 元 素 





着 手 完 成 生成 报表 的 代码 前 ， 先 来 感受 一 下 如 何 创 建 空 数组 并 在 其 中 
添加 新 元 素 。 你 已 经 知道 了 如 何 创建 非 空 数组 ， 如 下 所 示 : 








var genres = ["80s", "90s", "Electronic", "Folk"]; 


© 这 是 一 个 数组 字面 量 ， 我 们 详细 地 指 
定 了 该 数组 包含 的 元 素 。 


你 也 可 以 省 略 初 始 值 ， 从 而 创建 一 个 空 数组 : 


var genres = []; 


入 、 一 个 可 使 用 的 新 数组 ， 它 不 包含 任何 : 
元 素 ， 因 此 长 度 为 零 。 人 这 也 是 一 个 数组 字面 量 ， 
但 不 包含 任何 元 素 。 


你 已 经 知道 如 何 给 数组 添加 新 元 素 。 只 需 给 指定 索引 处 的 元 素 赋 值 即 
可 9 如 下 所 示 : 


I 新 建 一 个 数组 元 素 ， 它 存储 的 是 字符 
genres[0] = "Rockabilly"; 串 “Rockabilly 。 
genres[1] = "Ambient"; 新 建 另 一 个 数组 元 素 ， 它 存储 的 是 字 
var size = genres.length; 符 串 “Ambient 。 


作 变量 size 的 值 为 2， 即 数组 genres 的 
长 度 。 


添加 新 元 素 时 ， 必 须 小 心地 指定 索引 ， 人 否则 数组 将 是 黎 玻 的 〈sparse) ， 妈 
存在 “空洞 ”《〈 如 索引 0 和 2 处 有 值 ， 而 索引 1 处 没有 值 ) 。 数 组 黎 玻 未 必 是 坏 
事 ， 但 使 用 时 必须 特别 小 心 。 还 有 一 种 添加 新 元 素 的 方式 ， 就 古 使 用 push 方 
法 。 使 用 这 种 方式 时 无 需 指定 索 31， 其 工作 原理 如 下 : 





在 下 一 个 可 用 的 索引 (这 里 为 0) 处 新 建 一 个 元 素 ， 并 
Ver Gonees ls L 将 其 值 设置 为 “Rockabilly 。 
genres.push("Rockabilly"); 
genres.push("Ambient"); Re ee 处 新 建 男 一 个 元 

9 和 才 具 有 目 信 直人 六 mbient  。 


var size = genres.length; 
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天 于 迭代 和 数组 的 问题 


人 

加 ) ; 你 说 过 应 将 变量 声明 放 在 开头 ， 
可 for 语 句 的 第 一 部 分 包含 变量 声明 
和 初始 化 ， 这 是 怎么 回 事 呢 ? 


A 

号 ， 是 的 ， 将 变量 声明 放 在 开头 ( 
对 于 全 局 变量 ， 是 文件 开头 ; 对 于 局 
部 变量 ， 是 池 数 开头 ) 是 一 种 不 错 的 
做 法 ,但 有 了 时候 在 要 用 时 再 声明 变量 
更 合理 ， 而 for 语 名 就 饥 于 这 样 的 情 
况 。 通 常 ， 循 环 变 量 (如 i) 仅 用 于 选 
代 ， 循 环 结 束 后 就 不 再 需要 它 了 。 当 
然 ， 御 环 结束 后 ， 你 也 可 能 需要 使 用 
变量 i ， 但 通常 不 是 这 样 的 ， 因 此 在 
for 语 揣 中 声明 它 能 让 代码 更 整洁 。 


>» 

® 
[5) se 语法 myarray.push(value) 
到 底 是 什么 意思 呢 ? 


A 

只 ， 有 一 点 我 们 一 直 没 有 说 ， 那 就 
是 在 JavaScript 中 ， 数 组 实际 上 是 一 种 
特殊 的 对 名， 而 对 象 可 以 有 相关 联 的 
函数 ， 用 于 操作 对 象 。 这 将 在 下 一 章 
介绍 。 因 此 ,你 可 将 push 视 为 一 个 
可 对 myarray 进 行 操 作 的 函数 。 在 这 
里 ， 有 陶 数 push 在 数组 中 添加 一 个 元 素 ， 
而 元 素 本 身 是 以 实 参 的 方式 传递 给 
Push 的 。 因 此 ， 代 码 genres.push 
("Metal")7 调 用 函数 push， 并 将 字符 
串 实 参 "Metal" 传 递 给 它 。 了 有 函数 push 
将 这 个 实 参 作为 新 元 素 添 加 到 数组 


genres 末 尾 。 因 此 ， 看 到 myarray. 


push(value) 时 ,你 可 以 这 样 想 : 这 
是 要 在 数组 myarray 末 尾 添 加 一 个 新 
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A 1 二 一 
三 二 4 己 


世上 没有 
蚊 党 的 问题 


2 

[9) s 能 更 详细 地 说 说 稀 朴 数组 吗 ” 
A 6 

只 。 稀 琉 数 组 是 有 些 索 引 处 有 值 ， 


而 其 他 索引 处 没有 值 的 数组 。 创 建 稀 
足 数 组 易如反掌 ， 如 下 所 示 : 


Var sparseArray = | |]; 
sparseArrayl0] = true; 
spraseArray[l1l00] = true; 


在 这 个 示例 中 ，sparseArray 只 有 两 
个 值 ， 这 两 个 值 都 是 true， 分 别 位 于 
索引 0 和 100 处 。 其 他 索引 处 的 值 部 是 
undefined。 这 个 数组 虽然 只 包含 两 
个 值 ， 但 其 长 度 却 是 101。 


人 罩 

和 o) ; 假设 有 一 个 长 度 为 10 的 数组 ， 
在 索引 10 000 处 添加 一 个 新 元 素 后 ， 
索引 10 ~ 9999 处 的 值 将 是 什么 ? 

A 网 

只 ，。 这 些 数组 索引 处 的 值 都 为 
undefined。 你 可 能 还 记得 ， 未 初始 
化 的 变量 的 值 为 undefined。 因 此 ， 
你 可 以 这 样 认为 : 这 犹如 创建 了 9989 
个 变量 ， 但 没有 对 它们 进行 初始 化 。 
别 忘 了 ， 这 些 变量 虽然 没有 值 ， 但 它 
们 都 要 占用 计算 机 内 存 ， 因 此 除非 有 
充分 的 理由 ， 否 则 千 万 不 要 创建 稀 跳 
数组 。 


作 

上 o] ;交代 数组 时 ， 如 果 其 中 有 些 元 
素 的 值 为 undefined,， 使 用 元 素 前 必 
须 确认 它 不 是 undefined 吗 ? 


Ap ， 
只 ， 如 有 果 你 认为 数组 可 能 是 稀 跑 的 ， 
使 用 其 中 的 元 素 前 必须 确认 其 值 不 是 
unadefineadq， 那 怕 该 数组 只 有 一 个 


元 素 的 值 是 undefined。 将 元 素 的 值 
显示 到 控制 台 时 ， 这 不 是 什么 大 问题 ， 
但 你 通常 要 以 某 种 方式 使 用 元 素 的 值 ， 
如 使 用 它 来 执行 计算 。 在 这 种 情况 下 ， 
使 用 undefined 即 使 不 会 导致 错误 ， 
也 会 导致 意外 的 行为 。 要 检查 元 素 的 
值 是 不 是 undefined， 可 编写 类 似 于 
下 面 的 代码 : 


if (myarrayl[li|] == undefined) { 


| 

请 注意 ，undqefinedq 是 一 个 值 ， 而 不 
是 字符 串 ， 因 此 不 能 在 前 后 加 上 引号 。 
4 8 
[oj ;未 书 前 面 创建 的 数组 都 是 字面 
量 ， 还 有 其 他 创建 数组 的 方式 吗 ? 
As 。 
只 ， 有。 你 可 能 见 过 这 样 的 语法 : 

Var myarray = new Array(3); 
它 新 建 一 个 数组 ， 其 中 包含 3 个 室 位 
置 ， 即 长 度 为 3， 但 不 包含 任何 值 。 然 
后 ， 你 可 以 像 通常 那样 填充 这 些 空 位 
置 : 在 数组 myarray 的 索引 0、1 和 2 处 
填充 值 。 在 此 之 前 ，myarray 中 元 素 
的 值 都 是 undefined，。 
以 此 种 方式 创建 的 数组 与 数组 字面 量 
没什么 两 样 。 实 际 上 ， 你 更 常用 的 是 
字面 量 语法 ， 本 书后 面 也 通常 使 用 这 
种 语法 。 
对 于 上 述 语 法 ， 现 在 暂时 不 要 考虑 其 
中 的 细节 ， 如 new 以 及 Array 的 首 字 
母 为 何 大 写 ; 本 书后 面 将 详细 介绍 。 
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知道 如 何在 数组 中 添加 元 素 后 ， 就 可 
以 来 完成 报表 的 制作 了 。 我 们 可 以 创建 一 个 
数组 ,并 在 和 迭代 scores 数 组 以 找 出 最 高 得 
分 的 同时 ， 将 得 分 最 高 的 配方 添加 到 这 个 数 
组 中 ， 对 不 对 ? 















Judy: 对 。 我 们 首先 创建 一 个 空 数 组 ， 用 于 存储 得 分 最 高 的 配方 ， 并 
在 迭代 数组 scores 的 过 程 中 ， 将 得 分 最 高 的 配方 谎 加 到 这 个 数组 中 。 


Frank: 很 好 ， 虽 们 开始 吧 。 
Judy: 等 等 ， 我 认为 我 们 可 能 需要 使 用 一 个 单独 的 循环 。 
Frank: 是 吗 ? 好 像 应 该 有 办 法 在 既 有 循环 中 完成 这 项 任务 。 


Judy: 是 的 ， 必 须 使 用 一 个 单独 的 循环 。 原 因 如 下 : 要 找 出 得 分 最 高 
的 所 有 配方 ， 必 须知 道 最 高 得 分 古 多 少 。 因 此 我 们 需要 两 个 人 循环 ， 一 
个 找 出 最 高 得 分 (这 已 经 编写 好 了 ) ， 男 一 个 找 出 获得 最 高 得 分 的 所 
有 配方 。 


Frank: 哦 ， 我 明白 了 。 在 第 二 个 循环 中 ， 我 们 把 每 个 配方 的 得 分 与 
最 高 得 分 进行 比较 ， 如 末 相 同 ， 就 将 配方 的 索引 添加 到 用 于 存储 得 分 
最 高 配方 的 数组 中 。 


Judy: 完全 正确 ! 咱们 来 编写 代码 吧 。 



































别 秋 了， 变量 hiqhScore 存 储 了 最 高 得 分 ， 你 可 在 
下 面 的 代码 中 使 用 这 个 变量 。 


我 们 将 使 用 这 个 新 数组 来 存储 得 分 最 高 的 配方 。 


2 


var bestSolutions = []; 
for (var i = 0; i < scores.length; i++) { 

一 一 在 这 里 编写 代码 。 
} 
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你 能 编写 一 个 循环 ， 找 出 得 分 最 高 的 所 有 配方 吗 ? 答案 如 下 。 


首先 ， 新 建 一 个 数组 ， 用 于 | 机 ， 
储 得 分 最 高 的 所 有 配方 。 接 下 来 ， 挝 代 整 人 scores 数 
Wi 组 ， 找 出 得 分 最 高 的 元 素 。 


var bestSolutions = []; 


for (var i = 0; i < scores.length; i++) { 每 次 循环 时 ; 都 将 索引 EY 得 分 与 
if (scores[i] == highScore) { / highScore 进 行 比 较 ; 如 果 它 们 相等 ， 
就 使 用 函数 push 将 该 索引 添加 到 数组 


bestSolutions.push(i); ee bestSolutions 中 。 


} 
console.log("Solutions with the highest score: " + bestSolutions); 
\ 最 后 ， 可 以 显示 得 分 最 高 的 泡 泡 配 方 了 。 注 意 到 我 们 使 用 了 console.log 
显示 数组 pest5olutions。 我 们 原本 可 以 再 创建 一 个 循环 ， 逐 个 显示 


这 个 数组 的 元 素 ， 但 console.log 能 够 替 我 们 完成 这 样 的 任务 。 (如 果 你 
查看 输出 ， 将 发 现 它 还 在 数组 元 素 之 间 庄 加 了 逗号 | ) 


请 研究 上 面 的 代码 。 如 果 你 一 觉醒 来 后 ， 函 数 push 消 失 了 ， 该 如 何 办 呢 ? 你 能 不 再 使 用 push 重 


是 
与 上 面 的 代码 吗 ? 请 在 下 面 写 出 这 样 的 代码 。 


测试 最 终 的 报表 








让 数据 排 排 坐 


将 显示 得 分 最 高 泡 泡 配方 代码 加 入 bubbles.html， 并 再 次 对 该 网 页 进行 测试 。 下 面 显示 


了 完整 的 JavaScript 代 码 : 


var scores = [60, 50, 60, 58, 54, 54, 
58, 50, 52, 54, 48, 69, 
34, 55, 51, 52, 44, 51, 
69, 64, 66, 55, 52, 61, 
46, 31, 57, 52, 44, 18, 
41, 53, 55, 61, 51, 44]; 


var highScore = 0; 
var output; 
for (var i = 0; i < scores.length; i++) { 
output = "Bubble solution #" + i+" score: " + scores[il]; 


console.log(output); 
if (scores[i] > highScore) { 
highScore = scores[il]; 


} 
console.log("Bubbles tests: " + scores.length); 
console.log("Highest bubble score: " + highScore); 


Var bestSolutions = []; 
for (var i = 0; i < scores.length; i++) { 
if (scores[i] == highScore) { 


bestSolutions.push(i); 


} 


console.log("Solutions with the highest score: " + bestSolutions); 


胜出 的 配方 是 …… 


11 写 和 18 号 配方 的 得 分 最 高 ， 都 是 691! 因此 ， 在 测试 的 这 批 配方 中 ， 
它们 古 最 好 的 。 


JavaScript 控 制 全 


Bubble solution #0 score: 60 
1 oI- 


Bubble solution #34 score: 51 

Bubbles tests: 36 

Highest bubble score: 69 

Solutions with the highest score: 11,18 
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重新 思考 市 函数 的 代码 














上 一 章 花 了 很 大 的 篇 幅 时 论 
号 数 ， 这 里 怎么 一 个 芒 数 都 
次 久 肘 呢 ? 





你 说 的 对 ， 应 该 用 。 鉴 于 你 刚 学 习 函 数 ， 我 
们 想 移 介绍 一 下 数组 的 基本 知识 ， 再 着 手 使 
用 国 数 。 然 而 ， 在 任何 情况 下 ， 你 都 应 考虑 
可 将 哪 部 分 代码 提取 出 来 ， 将 其 放 到 函数 中 。 
男 外 ， 你 为 制作 泡 泡 配方 测试 报表 做 了 大 量 
的 工作 ， 如 末 你 要 重用 或 让 别人 能 够 重用 这 
些 代 码 ， 就 必须 将 它们 组 织 成 一 系列 可 直接 
使 用 的 函数 。 


来 看 生成 泡 泡 配 方 测试 报表 的 代码 ， 并 将 它 
们 重 构 (refactor) 一 系列 函数 。 重 构 指 的 是 
在 不 改变 代码 功能 的 情况 下 ， 对 其 进行 重新 
组 织 ， 使 其 更 易于 理解 和 维护 。 换 句 话 说 ， 
重 构 后 代码 的 功能 与 以 前 完全 相同 ， 但 组 织 
更 加 有 序 。 





让 数据 排 排 坐 


快速 审 针 代码 


下 面 来 研究 一 下 已 编写 的 代码 ， 确 定 要 将 哪些 代码 提取 





到 函数 中 : 

为 泡 泡 玩 具 反 斗 城 
<Idoctype html> MV 公司 编写 的 代码 ， 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 


<title>Bubble Factory Test Lab</title> 和 洲 / 
我 们 不 想 在 处 理 得 分 的 函数 中 声明 数组 


<script> 
var scores = [60, 50, 60, 58, 54, 54, 上 5core5， 因为 每 次 调用 这 个 区 数 时 ， 雪 处 理 
58, 50, 52, 54, 48, 69, 的 得 分 都 不 同 。 相 及 ， 我 们 将 得 分 scores 作 
34, 55, 51, 52, 44, 51, 为 实 参 传递 给 这 个 函数 ， 这 样 这 个 函数 就 能 
69, 64, 66, 55, 52, 61, 根据 任何 scores 数 组 来 生成 结 打 。 
46, 31, 57, 52, 44, 18, 
41, 53, 55, 61, 51, 44]; 
var highScore = 0; 
var output; 
这 部 分 代码 用 来 输出 数组 
for (var i = 0; i < scores.length; i++) { Re To 
output = "Bubble solution #" + i+" score: " + scores[i]; 中 的 最 高 得 分 。 可 将 它 
console.log(output); 们 放 在 函数 printAndCet- 
if (scores[i] > highScore) { HighScore 中 。 
highScore = scores[il]; 
} 
} 
console.log("Bubbles tests: " + scores.length); 


console.log("Highest bubble score: " + highScore); 
var bestSolutions = []; 这 部 分 代码 根据 最 高 得 分 找 
' 出 最 佳 配方 。 可 将 它们 放 在 


淘 北 


if (scores[i] == highScore) { 


bestSolutions.push(i); 


console.log("Solutions with the highest score: " + bestSolutions); 
</script> 
</head> 
<body> </body> 
</html> 
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使 用 函数 进行 重 构 


编写 咏 数 printAndGetHighScore 


我 们 找 出 了 要 放 在 冰 数 printAndGetHighscore 中 的 代码 。 这 些 代码 都 是 
现成 的 ， 但 要 将 其 转换 为 国 数 ， 需 要 人 确定 要 给 国 数 传递 哪些 实 参 以 及 它 征 否 
要 返回 值 。 


传人 scores 数 组 看 起 来 是 个 不 错 的 主意 ， 因 为 这 样 可 将 这 个 国 数 用 于 处 理 
其 他 的 泡 泡 配方 测试 得 分 数组 。 田 外 ， 我 们 要 返回 这 个 函数 找 出 的 最 高 得 分 ， 
让 调用 它 的 代码 能 够 据 此 做 些 有 趣 的 事情 〈 我 们 将 据 此 找 出 最 佳 配方 ) 。 


哦 ， 还 有 一 点 : 你 通常 希望 函数 只 做 一 件 事 ， 并 把 这 件 事 做 好 。 然 而 ， 这 
个 函数 做 了 两 件 事 : 显示 数组 中 的 所 有 得 分 并 找 出 最 高 得 分 。 你 可 能 想 
将 它 分 成 两 个 国 数 ， 但 芳 虑 到 它 做 的 两 件 事 情 都 非 党 简单， 我 们 就 不 这 样 
做 了 。 在 实际 工作 中 ， 可 能 需要 将 这 个 函数 分 成 两 个 : PrintScores 和 
getHighScore。, 但 就 这 里 而 言 ， 我 们 不 打算 这 样 做 。 重 构 后 的 代码 如 下 : 





我 们 创建 了 一 个 函数 ， 它 接受 


( 一 个 实 参 一 一 数组 scores。 


function printAndGetHighScore(scores) { 
Var highScore = 0; 
var output; 
for (var i = 0; i < scores.length; i++) { 
output = "Bubble solution #" +i+" score: " + scores[il]; 


console.log(output); 


if (scores[i] > highScore) { 0 这 些 代 码 与 以 前 完全 相 
highScore = scores[il]; 癌 》 准 确 地 说 是 看 起 来 与 
以 前 完全 相同 ， 但 使 用 的 


名 ) SR 
定形 参 scores， 而 不 是 全 
局 变量 scores。 


} 


return highScore; < 
} 


我 们 新 增 了 一 行 代 码 ， 
它 将 highScore 返 回 给 调 
用 函数 的 代码 。 


让 数据 排 排 坐 


使 用 PrzintRAndGetHighScore 重 构 代 码 


现在 需要 修改 基 他 代码 ， 以 使 用 这 个 新 国 数 。 为 此 ， 只 需 调用 新 国 数 PrintAndGet- 
HighScore， 并 将 变量 highSscore 设 置 为 其 结果 : 





<Idoctype html> 
<html lang="en"> 
<head> 
<title>Bubble Factory Test Lab</title> 
<meta charset="utf-8"> 
<script> 
var scores = [60, 50, 60, 58, 54, 54, 58, 50, 52, 54, 48, 69, 
34, 55, 51, 52, 44, 51, 69, 64, 66, 55, 52, 61, 
46, 31, 57, 52, 44, 18, 41, 53, 55, 61, 51, 44]; 


function printAndGetHighScore(scores) { 

var highScore = 0; 

var output; 

for (var i = 0; i < scores.length; i++) { ~ 准备 就 绪 的 新 函数 。 
output = "Bubble solution #"+i+" score: " + scores[il]; 
console.log(output); 
if (scores[i] > highScore) { 

highScore = scores[il]; 


} 


return highScore; 
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var highScore = printAndGetHighScore(scores); 现在 只 需 调 用 这 个 函 煞 ， 并 
户 一 » 

console.log("Bubbles tests: " + scores.length); 传 入 数 组 scores; 再 将 已 廊 
console.log("Highest bubble score: " + highScore); 回 的 值 赋 给 变量 highScore。 

Var bestSolutions = []; 

人 各 一 接 下 来 需要 将 这 些 代码 重 构 

for (var i = 0; i < scores.length; I++) { 为 一 个 函数 ; 并 相应 地 修 2% 

If (scores[I] == highScore) { 其 他 代码 。 


bestSolutions.push(i); 


console.log("Solutions with the highest score: " + bestSolutions); 
</script> 
</head> 
<body> </body> 
</html> 
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代码 重 构 练习 


KC 


匿名 上 隆 


让 我 们 一 起 来 完成 这 项 重 构 任务 。 这 里 的 目标 是 编写 一 个 函数 ， 它 创建 一 个 数组 ， 其 中 包 
含 得 分 最 高 的 泡 泡 配 方 (可 能 有 多 个 这 样 的 配方 ， 这 就 是 我 们 使 用 数组 来 存储 配方 的 原因 
所 在 ) 。 我 们 将 给 这 个 函数 传递 数组 scores， 还 有 使 用 printAndGetHighScore 计 算得 
到 的 highScore。 请 补 全 下 面 的 代码 。 答 案 见 下 一 页 ， 可 不 要 偷 看 ! 请 先 尝试 补 全 这 些 代 
码 ， 这 样 你 才能 真正 明白 它们 。 





> var bestSolutions = []; 


这 是 原来 的 代码 ; for (var i = 0; i < scores.length; i++) 1 
这 里 列 出 它们 每 在 if (scores[i] == highscore) { 


供 你 参考 。 bestSolutions.push(i); 


} 


console.log("Solutions with the highest score: 


”+ bestSolutions)， 





一 我 们 完成 了 大 致 的 轮 请 ， 


需要 你 来 帮助 补 全 
function getBestResults( ) { 
var bestSolutions = ? 
for (var i = 0; i < scores.length; i++) { 
if ( == highScore) { 
bestSolutions. ? 
} 
} 
return 有 
} 
var bestSolutions = (scores, highScore); 
console.log("Solutions with the highest score: " + bestSolutions); 


合 起 来 


重 构 好 代码 后 ， 像 下 面 这 样 修改 bubbles.html， 然 后 在 浏览 器 中 重新 加 载 它 。 


以 前 完全 相同 ， 但 代码 更 加 组 织 有 序 ， 可 重用 性 更 高 。 请 创建 自己 的 得 
试 重用 这 些 代 码 ! 


<Idoctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Bubble Factory Test Lab</title> 


<script> 
var scores = [60, 50, 60, 58, 54, 54, 58, 50, 52, 54, 48, 69, 
34, 55, 51, 52, 44, 51, 69, 64, 66, 55, 52, 61, 
46, 31, 57, 52, 44, 18, 41, 53, 55, 61, 51, 44]; 


function printAndGetHighScore(scores) { 
var highScore = 0; 
var output; 
for (var i = 0; i < scores.length; i++) { 
"Bubble solution #" + 二 " 
console.log(output); 
If (scores[i] > highScore) { 
highScore = 


output = score: 


scores[il]; 
} 


return highScore; 


这 是 新 函数 
getBestResults。 


function getBestResults(scores, highScore) { 
var bestSolutions = []; 
for (var i = 0; i < scores.length; 
If (scores[il] highScore) { 


bestSolutions.push(i); 


i++) { 


} 


return bestSolutions; 


var highScore = printAndGetHighScore(scores); 
console.log("Bubbles tests: " + scores.length); 
console.log("Highest bubble score: " + highScore); 


var bestSolutions = getBestResults(scores, highScore); 
console.log("Solutions with the highest score: " + bestSolutions); 


</script> 
</head> 
<body> </body> 
</html> 


"+ scores[i]; 


让 数据 排 排 坐 


结 朱 应 与 
分 数组 ， 并 学 


根据 函数 getBestResults 
返回 的 结果 在 报表 中 癌 
示 最 佳 配方 。 


一 一 
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更 多 的 泡 泡 计算 










做 得 好 ! 还 有 一 项 任务 : 你 能 找 出 性 价 比 最 高 饼 
配方 吗 ? 有 了 这 项 数据 ， 我 们 一 定 能 占据 整个 泡 
泡 配 方 市 场 。 下面 的 数组 包含 每 种 配方 的 成 本 ， 
你 可 据 此 找 出 性 价 比 最 高 的 配方 。 


这 是 成 本 数组 ， 它 包含 得 分 
数组 中 每 个 配方 的 成 本 。 


var costs = [.25, .27, .25, .25, .25, .25, 
:33 3l, 25 v29 wal; .22, 
ol sD 25 203 21.. v25, 
29 £29, a28, 25, m24, .22, 
20 29, 30. 25; i24; :25; 





2D 25D, 2 i295 :26 29]; 








这 里 的 任务 是 什么 呢 ?” 在 最 佳 的 泡 泡 配 方 ( 即 得 分 最 高 的 配方 ) 中 ， 找 出 成 本 最 
低 的 配方 。 好 在 我 们 有 一 个 与 scores 数 组 对 应 的 costs 数 组 : 在 数组 scores 中 ， 
索引 0 处 得 分 对 应 的 泡 泡 配 方 的 成 本 存储 在 数组 costs 的 索引 0 处 (为 0.25) ; 在 
数组 scores 中 ， 索 引 1 处 得 分 对 应 的 泡 泡 配 方 的 成 本 存储 在 数组 costs 的 索引 1 处 
(为 0.27) ， 依 此 类 推 。 也 就 是 说 ， 对 于 任何 得 分 ， 都 可 在 数组 costs 的 相同 索引 
处 找到 对 应 配方 的 成 本 。 这 样 的 数组 也 叫 平 行 数组 。 











~ 4 二 米 关 竺 个 
数组 scores 和 cost5 是 平行 数组 ， 四 为 每 1 


得 分 和 对 应 的 成 本 都 位 于 相同 的 膏 引 处 。 


Var Costes = 上 上 25 21 129 29 29 .29 33, 3ls .295292722 ee w29]; 


声 的 文 
人 ^ we ， 0 这 两 个 数组 中 的 其 他 成 本 和 得 


[ 分 值 也 存在 这 种 对 应 关系 。 


var Scores = [60, 50, 60, 58, 54, 54, 58, 50, 52, 54, 48, 69, .., 44]; 


fr i 
= /| 
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这 好 像 有 点 藉 手 。 如 何 找 出 得 分 最 
高 明成 本 最 低 的 配方 呢 ? 






Judy: 我 们 已 经 知道 了 最 高 得 分 。 


Frank: 是 的 ， 但 如 何 利用 这 项 信息 呢 ? 我 们 有 两 个 数组 ， 如 何 结 
合 使 用 它们 呢 ? 


Judy: 我 敢 肯 定 ， 我 们 两 个 都 能 编写 一 个 简单 的 for 循 环 ， 来 再 次 
允 历 数组 scores， 并 找 出 其 中 与 最 高 得 分 相等 的 元 素 。 


Frank: 是 的 ， 我 能 ， 但 那 又 如 何 呢 ? 


Judy: 每 次 遇 到 与 最 高 得 分 相等 的 元 素 时 ， 我 们 都 需要 检查 其 成 本 
契 否 十 最 低 的 。 


Frank: 哦 ， 我 明白 了， 我 们 将 声明 一 个 变量 ， 用 于 记录 得 分 最 高 且 成 本 最 低 的 配方 
的 索引 。 这 好 像 有 扩 绕 口 。 


Judy: 太 对 了 。 过 历 完 整个 数组 后 ， 这 个 变量 存储 的 索引 就 征 得 分 最 高 且 成 本 最 低 
的 配方 的 索引 。 


Frank: 如 果 两 个 配方 的 成 本 相等 ， 该 如 何 办 呢 ? 


Judy: 我 们 必须 决定 如 何 处 理 这 种 情形 。 要 我 说 ， 哪 个 配方 在 前 面 就 选 哪 个 。 当 然 ， 
我 们 可 以 做 更 复杂 的 处 理 ， 但 只 要 CEO 同 意 ， 我 们 就 采取 这 种 处 理 方 法 吧 。 


Frank: 这 已 经 很 复杂 了 ， 我 想 我 得 先 编写 伪 代 码 ， 再 着 手 编写 实际 代码 。 


Judy: 我 也 古 这 么 认为 的 ， 管 理 多 个 数组 的 索引 时 ， 情 况 都 可 能 比较 棘手 。 咀 们 就 
来 编写 伪 代 码 吧 ， 从 长 迁 看 ， 这 样 做 是 麻 刀 不 误 砍 和 菏 工 。 


Frank: 好 的 ， 我 来 试 一 试 。 
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将 伪 代 码 转换 为 代码 











下 面 是 我 编写 的 伪 代 码 ， 我 肯定 它们 没有 
问题 。 现 在 请 你 将 其 转换 为 JavaScript 代 
码 。 清 务必 将 你 的 代码 与 本 章 末 尾 的 答案 
进行 对 痕 。 


: 续 司 - 





号 数 GETMOSTCOSTEFFECTIVESOLUTION (SCORE COSTS, HIGHSCORE) 
声明 变量 cost 并 将 其 设置 为 100 
声明 变量 index 


FOR 循环 : var i=0; i < scores.length; i++ 






























































































































































































































































































































































































































































































































































IF Scoresij 对 应 的 泡 泡 配 方 的 得 分 是 最 局 的 
IF 变量 COSt 的 值 大 于 该 泡 泡 配 万 的 成 本 
THEN 
将 要 量 Index 设 置 为 | 的 全 
将 变量 cost 设 置 为 该 泡 泡 配方 的 成 本 
IF 语句 到 此 结束 
IF 语句 到 此 结束 
FOR 循环 到 此 结束 
返回 Imnaex 


function getMostCostEffectiveSolution(scores, costs, highscore) { 


将 上 述 伪 代码 转 
损 为 JavaScript 代 
码 ， 并 写 在 这 里 。 


} 
var mostCostEffective = getMostCostEffectiveSolution(scores, costs, highScore); 


console.log("Bubble Solution #'" + mostCostEffective + " is the most cost effective"); 


让 数据 排 排 坐 


选中 的 配方 ，1i1 号 配方 


你 刚 编 写 的 代码 可 帮助 确定 聂 终 胜 出 的 配方 ， 即 能 够 以 耻 低 的 成 本 产生 聂 多 
泡 泡 的 配方 。 锅 贸 你 遍 过 处 理 大 量 的 数据 ， 给 泡 泡 玩 具 反 斗 城 公司 提 供 了 可 
用 于 作出 高 业 决 策 的 依据 。 


如 果 你 像 我 们 一 样 ， 一 定 很 想 知道 11 号 和 配方 都 包含 哪些 东西 。 不 周 舍 近 求 
远 ， 泡 泡 玩 具 反 斗 城 公 司 的 0E0 说 了， 考虑 到 你 没有 收取 任何 编码 费用 ， 他 
愿意 将 这 个 配方 告诉 你 。 


下 面 就 是 11 号 配方 的 详细 情况 。 请 按 这 个 写 方 制作 ， 去 室外 吹 些 泡 泡 ， 再 
接着 阅读 下 一 童 。 阅 读 下 一 童 前 ， 别 忘 了 还 有 要 点 和 赴 字 游戏 1 










ee 


EE, 
- ~ i 

Ee 天 一 a 本 Wl 

ns es 


一 祝 你 玩 得 恰 快 ! 一 


See ee 


在 家 里 试 试 吧 | 
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QA 


数组 是 一 种 按 顺 序 存 储 数据 的 数据 
结构 。 

数组 包含 一 系列 元 素 ， 其 中 每 个 元 
素 都 有 索引 。 

数组 索引 从 零 开始 ， 其 中 第 一 个 元 
素 的 索引 为 零 。 

所 有 数组 部 有 length 属 性 ， 它 指 
出 了 数组 包含 多 少 个 元 素 。 

要 访问 数组 元 素 ， 可 使 用 其 索引 。 
例如 ，myArray[1] 访 问 元 素 1 ( 数 
组 中 的 第 二 个 元 素 ) 。 

试图 访问 不 存在 的 元 素 将 返回 
undefined,。 

给 既 有 元 素 赋值 将 修改 该 元 素 的 
值 。 

给 不 存在 的 元 素 赋值 将 在 数组 中 新 
建 一 个 元 素 。 

数组 元 素 可 以 是 任何 类 型 的 值 。 


在 同一 个 数组 中 ， 不 要 求 所 有 值 的 
类 型 都 相同 。 


要 创建 一 个 新 数组 ， 可 使 用 数组 字 
面 量 表示 法 。 

要 创建 一 个 空 数组 ， 可 使 用 语法 
Var myArray = [|];。 

常 使 用 for 循 环 来 迭 代数 组 。 

for 循 环 在 一 条 语 名 中 包含 变量 初 
始 化 、 条 件 测试 和 变量 递增 。 
while 循 环 最 常用 于 不 知道 需要 循 
环 多 少 次 时 ， 它 人 循环 到 条 件 满 足 为 
止 。for 循 环 最 常用 于 知道 循环 需 
要 执行 多 少 次 时 。 

稀 路 效 组 指 的 是 中 间 有 值 为 
undefinegd 的 元 素 的 数组 。 

要 将 变量 加 1， 可 使 用 后 圳 增 运 算 
符 ++。 

要 将 变量 减 1， 可 使 用 后 谴 减 运算 
符 --。 

要 在 数组 中 添加 新 元 素 ， 可 使 用 逊 
数 push, 





横向 

5. 包含 值 为 undefined 的 元 素 的 数组 。 

9. 修改 数组 元 素 的 值 时 ， 对 元 素 执行 的 操作 。 
10. 认为 其 泡 泡 配 方 将 胜出 的 人 。 

14. 重新 组 织 代码 ， 使 其 更 容易 理解 和 维护 。 
17. 数组 的 每 个 值 都 存储 在 一 个 什么 处 ? 





让 数据 排 排 坐 


JavaScript 迷 学 游戏 


请 完成 这 个 填 字 游戏 ， 让 数组 深 深 地 刻 在 你 的 脑海 中 。 


纵向 

1. 用 于 在 既 有 数组 末尾 添加 新 元 素 的 国 数 。 

2. 迭代 数组 时 通常 使 用 的 一 种 循环 。 

3. 数组 擅长 存储 一 个 还 是 多 个 值 ? 

4. 数组 的 最 后 一 个 索引 总 是 比 数组 长 度 小 1 还 是 大 1? 
6. 用 于 将 循环 变量 加 1 的 运算 符 。 

7. 迭代 数组 时 ， 通 常 根据 哪个 属性 来 确定 什么 时 候 该 
停止 迭代 ? 

8. 第 一 个 数组 元 素 的 索引 。 

11. 为 指定 的 数组 元 素 的 值 。 

12. 函数 可 帮助 代码 。 

13. 数组 是 一 种 存储 什么 数据 的 数据 结构 ? 

15. 在 本 章 中 ， 得 分 最 高 的 移 泡 配方 有 多 少 个 ? 

16. 要 访问 数组 元 素 ， 可 使 用 以 方 插 号 括 起 的 什么 ? 
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下 面 的 products 数 组 存储 了 Jenn & Berry 销 售 的 各 种 冰淇淋 口味 。 这 些 冰淇淋 
口味 是 按 制 作 顺 序 添加 到 数组 中 的 ， 请 补 全 下 面 的 代码 ， 找 出 最 后 制作 的 冰 ; 


湛 


/六 


淋 口 味 。 答 案 如 下 。 


var products = ["Choo Choo Chocolate", "Icy Mint", "Cake Batter", 


var last = products.length - 1; Te 

要 获取 最 后 一 个 元 素 的 索引 ， 
可 将 数组 的 长 度 减 1。 数 组 长 
度 为 4， 因 此 最 后 一 个 元 素 的 
索引 为 5， 这 是 因为 索引 是 从 
0 开始 的 。 


var recent = products[last]; 









代 碚 冰 攻 贴 党 和 案 


> 我 们 编写 了 一 些 代 码 ， 用 于 找 出 哪些 口味 的 冰淇淋 中 有 泡泡糖 。 我 们 

使 用 冰箱 贴 将 所 有 的 代码 都 正确 地 贴 到 了 冰箱 上 ， 但 这 些 冰 箱 贴 都 脱 
| 落 了 。 你 的 任务 是 将 它们 重新 贴 好 。 请 注意 ， 其 中 有 一 些 冰 箱 贴 是 多 余 
的 。 答 案 如 下 。 





= ["Choo Choo Chocolate'", | 
var products es Mint", "Cake Batter", 


"Bubblegum"]; 













多 出 来 的 冰箱 贴 。 


2 
DE 


var hasBubbleGum = [false, 
false, 


false, 





truel; 


while (i < ECE gee 
if hasBubbleGum[i]) 


console.log(products[i] + 
" contains bubble gum"); 





这 是 我 们 期 里 的 输出 。 


JavaScript 控 制 合 


Bubblegum contains bubble gum! 






重新 排列 的 冰箱 贴 。 


"Bubblegum"]; 





while (i > hasBubbleGum.length) 





让 数据 排 排 坐 





请 重 写 两 页 前 的 冰箱 贴 代 码 ， 用 for 循 环 代替 其 中 
的 while 循 环 。 如 果 你 需要 帮助 ， 请 参阅 前 一 页 
中 while 循 环 的 每 个 组 成 部 分 ， 看 看 它们 分 别 对 
应 于 for 循 环 的 哪个 部 分 。 答 案 如 下 。 















te" 
= [I"Choo Choo Chocolate, | 
var products J Mint", "Cake Batter", 


"Bubblegum"]; 


var hasBubbleGum = [false, 
false, 
false, 


truel]; 


if (hasBubbleGum[i]) [ 


console.log(products[i] + 
" contains bubble gum"); 


} 
在 这 里 编写 $ 的 代码 


var products = ["Choo Choo Chocolate", 
"Icy Mint", "Cake Batter", 
"Bubblegum"]; 
var hasBubbleGum = [false, 
false, 
false, 


truel]; 


for (var i = 0; i < hasBubbleGum.length; i = i + 1) 
if (hasBubbleGum[i]) { 


console.log(products[i] + " contains bubble gum"); 
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练习 答案 


降 


€ | 
分 


人 
4 





请 补 全 下 面 的 代码 ， 以 实现 前 一 页 中 找 出 最 高 得 分 的 伪 代 码 ， 再 据 此 更 新 
bubbles.html 中 的 代码 ， 并 尝试 在 浏览 器 中 重新 加 载 该 网 页 。 查 看 探 制 台 中 
的 结果 ， 并 据 此 填写 下 面 的 控制 全 显示 结果 中 空白 的 内 容 : 测试 的 泡 泡 配方 
数 和 最 高 得 分 。 答 案 如 下 。 


var Scores = [60, 50, 60, 58, 54, 54, 
58, 50, 52, 54, 48, 69, 
34, 55, 51, 52, 44, 51, 
69, 64, 66, 55, 52, 61, 
46, 31, 57, 52, 44, 18, 
41, 53, 55, 61, 51, 44]; 
var highScore = 0O  ; La 0 


var output; 


for (var 1 0; i < scores.length; I++) { 
output = "Bubble solution #"” + i+ " score: " + scores[il]; 


console.log(output); 


if ( Scores[i] > highScore) { 
highScore = scores[il]; 
} 
} 
console.log("Bubbles tests: " + scores.length ); 
console.log("Highest bubble score: " + highScore ); 


JavaScript 控 制 台 
Bubble solution #0 score: 60 


Bubble solution 机 score: 50 
Bubble solution #2 score: 60 


Bubble solution #34 score: 51 
请 补 全 这 里 的 控制 台 输 出 。 Bubble solution #35 score: 44 


~、 > Bubbles tests: GO 
Highest bubble score: O09 





让 数据 排 排 坐 


下 面 是 函数 getMostCostEffectiveSolution 的 代码 ， 它 接受 一 个 得 分 数组 、 一 
上 E 


个 成 本 数组 和 一 个 最 高 得 分 ， 并 找 出 得 分 最 高 且 成 本 最 低 的 配方 的 索引 。 请 将 这 些 
代码 加 入 bubbles.html 中 ， 测 试 该 网 页 ， 并 确认 你 的 结果 与 这 里 显示 的 相同 。 






yy 


缘 习 


答案 
的 函数 getMostCostEffectiveSolution 接 受 一 个 得 分 数组 、 
一 个 成 本 数组 和 一 个 最 高 得 分 。 
function getMostCostEffectiveSolution(scores, costs, highscore) { 我 们 将 变量 cost 初 始 化 为 较 信 
ee ee 的 数字 ; 每 当 得 分 最 高 的 配方 
var cost = 100; 我 们 将 使 用 变量 cost 来 记录 最 低 成 本 。 性 有 更 低 的 成 本 时 ， 都 修改 这 个 
var index; 一 使 用 变量 index 来 存储 成 本 最 低 的 配方 的 索引 。 变量 的 值 。 
人 人 像 以 前 那样 迭代 数组 scores。 
for (var i = 0; i < scores.length; I++) { 
if (scores[i] == highscore) { < 检查 配方 的 得 分 是 否 最 高 。 
if t > 七 S [1 、 
Oe 一 各 果 是 ， 就 检查 配方 的 成 本 。 如 打 变 量 cost 乓 值 大 于 
index = i; 当前 配方 的 成 本 ， 就 说 明 找 到 了 成 本 更 低 的 配方 ， 加 
pe 此 将 该 配方 〈 它 在 数组 中 的 索引 ) 记录 下 来 ， 并 将 其 
克 本 作为 目前 过 到 的 最 低 成 本 存储 到 变量 cost 中 。 
} 
. 上 循环 结束 后 ， 变 鲁 index 存 储 的 便 是 
return index; 成 本 最 低 的 配方 的 索引 ， 因 此 我 们 


} /一 将 它 这 加 给 调用 这 个 到 浆 的 代 三 。 


var mostCostEffective = getMostCostEffectiveSolution(scores, costs, highScore); 


console.log("Bubble Solution #'" + mostCostEffective + " is the most cost effective"); 





路 下 来 ， 将 索引 ( 兆 光 配方) -个 


显示 到 控制 台 。 







Java9cript 控 制 台 


的 报告 指出 ，11 号 泡 钨 配方 在 测试 中 胜出 E950E 必 守 P 和 时 
因为 它 以 最 低 的 成 本 产生 了 最 多 的 泡 所 。 是 99 EP 机 score: 50 
Bubble solution #2 score: 60 


忽 
取 公 
和 


3 


提示 : 也 可 使 用 数组 best5olutions 来 实现 这 种 功 


能 ， 这 样 就 无 需 再 次 迭代 所 有 的 得 分 了 。 别 忘 了 ， Bubble solution #34 score: 51 


数组 bestSolutions 存 储 了 得 分 最 高 的 配方 的 索引 ， lon ore ed 

因此 在 代码 中 ， 可 以 将 数组 pestSolutions 的 元 素 用 Bubbles tests: 36 

作 数 组 costs 的 索引 ， 以 比较 不 同 配方 的 成 本 。 相 Highest bubble score: 69 

对 于 现 有 版 本 ， 这 种 代码 的 效率 较 高 ， 但 理解 起 Solutions with the highest score: 11,18 

来 更 难 | 如 果 你 感 兴趣 ， 可 从 wickedlysmart.com 下 Bubble Solution #11 is the most 了 effective 
载 这 些 代 码 。 
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处 
如 


全 
AN 
如 
让 
A> 
.人 
WwW 
ee 
S 
~ 
总 
乞 ) 


让 数组 深 深 地 刻 在 你 的 脑海 中 。 


请 完成 这 个 填 字 游戏 ， 





sr Zou 
Du zl 上 工 也 
四 EE 
eol wml rn zw aulsuwz 
vo 过 
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9 理解 对 象 


对 杀 氏 之 旋 * 


我 们 去 对 和 象 镇 了 ! 我 们 就 
要 离开 这 个 破 儿 的 过 程 镇 ， 再 
也 不 同 来 。 我 们 会 给 你 寄 明 信 
片 的 ! 


人 NN ' U Nm 
Na A) NA 
\ Wb had J A ‘ 





到 目前 为 止 ， 你 在 代码 中 使 用 的 都 是 基本 类 型 和 数组 。 另 外 ， 你 
使 用 简单 语句 、 条 件 、for/while 循 环 和 函数 来 编写 代码 ， 这 种 编码 方式 的 
过 程 化 程度 极 高 ， 不 完全 是 面向 对 象 的 。 实 际 上 ， 这 根本 就 不 是 面向 对 象 的 。 
你 确实 偶尔 在 不 知 不 觉 间 使 用 了 一 些 对 象 ， 但 从 未 编写 过 自己 的 对 象 。 现 在 ， 
该 放弃 这 种 枯燥 的 过 程 型 编程 方式 ， 转 而 创建 一 些 自己 的 对 象 了 。 在 本 章 中 ， 
你 将 了 解 为 何 使 用 对 象 可 让 生活 更 美好 ， 当 然 这 是 从 编程 意义 上 说 的 ， 因 为 本 
书 只 负责 提高 JavaScript 技 能 ， 而 不 能 让 你 变 得 更 时 尚 。 需 要 指出 的 是 ， 到 了 
对 象 镇 ， 你 会 乐 不 思 蜀 ， 可 别 忘 了 给 我 们 寄 明 信 片 。 
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对 象 简介 


对 象 


啊 ， 终 于 到 了 我 们 最 喜欢 的 主题 ! 对象 (object) 将 让 你 的 JavaScript 编 
程 技能 更 上 一 层 楼 。 它 们 是 管理 复杂 代码 、 理 解放 览 占 对 象 模型 (这 将 
在 下 一 章 介 绍 ) 和 组 织 数 据 的 关键 ， 还 是 很 多 JavaScript 库 的 基本 组 织 方 
式 (这 将 在 本 书后 面 更 详细 地 介绍 ) 。 然 而 ， 对 象 是 个 不 好 理解 的 主题 。 
我 们 马上 束 来 介绍 ， 不 入 后 你 就 将 使 用 它们 。 


不 可 思议 的 是 ，JavaScript 对 象 不 过 是 一 系列 属性 (property) 而 已 。 就 
拿 汽 车 来 说 吧 ， 它 有 如 下 属性 。 





Ar 还 有 型 号 ， 这 里 为 Bel Air。 





汽车 有 品牌 ， 如 要 
和 3 / “汽车 有 颜色， 
有 些 汽 车 有 可 折 营 车 徐 ， 但 这 4 人 0 
辆 没有 。 | 
汽车 有 核定 载 客人 数 。 人 
汽车 有 里 程 数 ， 即 已 行驶 


多 少 英 里 。 


汽车 不 仅 有 属性 ， 还 能 做 事情 。 稍 后 将 讨论 对 象 的 行为 ， | 
现在 先 来 说 说 属性 。 


理解 对 象 


属性 
当然 ,汽车 有 很 多 属性 ， 不 仅仅 是 前 面 说 的 那 几 个 ， 但 就 编码 而 言 ， 


我 们 只 在 软件 中 记录 这 几 个 属性 。 下 面 来 看 看 这 些 属 性 的 JavaScript 
数据 类 型 。 


汽车 有 一 系列 的 属性 。 


这 是 用 软件 对 象 表 2 
示 的 汽车 。 /一 每 个 属性 都 有 名 称 和 值 。 









属性 make (品牌 ) 、model (型 号 ) 


“che, SN J AA 
ew 人 一 和 color ( 额 色 ) 的 值 为 字符 串 。 


: "Bel Air” 


、 属性 year (生产 年 份 ) 、passengers 
(核定 载 客人 数 ) 和 mileage (里 程 ) 


A 


\ 属性 convertible (可 折 匣 车 签 ) 
的 值 为 布尔 值 。 


-省 者 你 的 
脑力 你 还 希望 汽车 对 象 包含 其 他 哪些 属性 呢 ? 你 还 能 想到 汽车 的 哪些 属 
性 呢 ? 将 它们 都 写 在 下 面 吧 。 但 别 志 了 ， 在 软件 中 只 有 部 分 实际 属 
性 是 有 意义 的 。 
此 治 汽车 许 信 也 许 介 已 
， 但 在 对 象 中 记录 i 
人 们 家 的 有 章 义 吧 1 


部 学 
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对 和 象 属性 


性 笔 上 阵 
AN 我 们 要 制作 一 个 表格 ， 在 其 中 列 出 汽车 属性 的 名 称 和 值 。 你 能 帮助 我 们 完 


成 这 项 任务 吗 ? 请 将 你 的 答案 与 本 章 末 尾 的 答案 进行 对 比 ， 再 接着 往 下 阅 





读 。 
在 这 里 列 出 属性 的 在 这 里 列 出 属性 的 值 。 
人 
model / 
year / 
color : / 
passengers : / 
convertible : / 
将 答案 写 在 这 里 。 你 mileage  :  ,， 


可 随意 拓展 这 个 列表 ， 
在 其 中 添加 你 想到 的 


其 他 属性 : | “qe 


}; 请 注意 指定 属性 和 值 时 使 用 的 
-省 考 你 的 
脑力 


语法 ， 后 面 可 能 考查 你 这 方面 
的 知识 。 

出 租车 有 哪些 属性 和 值 与 前 述 1957 年 产 的 雪佛兰 相同 ? 这 种 车 可 能 有 哪些 不 同 之 处 ? 它们 有 哪些 额外 

的 属性 ? 又 有 哪些 属性 是 它们 没有 的 ? 





理解 对 象 


如 何 创 建 对 象 


好 消息 是 ， 在 前 一 个 “ 磨 笔 上 阵 ”练习 中 ， 你 已 经 差不多 创建 了 一 
个 对 象 ， 唯 一 欠缺 的 工作 是 将 其 赋 给 一 个 变量 ， 以 便 能 够 使 用 它 来 
做 事情 ， 如 下 所 示 : 


次 加 一 个 对 象 变量 声明 。: 人 


var chevy = { 


接 下 来 ， 使 用 左 花 括号 开局 对 象 定 义 。 一 一 make: "Chevy", 
model: "Bel Air", 
然后 ， 在 花 括 号 内 定义 对 象 的 所 有 属性 . 一 > 
全 year: 1957, 
每 个 属性 的 定义 都 包含 名 称 、 则 号 和 值 。 这 COlor: red" 
里 包含 值 为 字符 串 、 数 字 和 布尔 值 的 属性 。 
passengers: 2, 
注意 到 属性 之 间 用 逗号 分 隅 。 convertible: false, 
mileage: 1021 
对 象 定 义 以 右 花 括号 结尾 ， 与 其 他 变量 声明 ”上 
一 样 ， 对 象 变量 声明 也 以 分 号 结束 。 


这 样 做 的 结 采 是 什么 呢 ?” 当 然 古 一 个 全 新 的 对 象 。 对 象 将 所 有 的 
名 称 和 值 ( 即 属性 ) 组 合 在 一 起 。 


至 此 ， 你 创建 了 一 个 包含 一 系列 属性 的 对 人 象 ， 并 将 其 赋 给 了 
一 个 变量 ， 以 便 使 用 它 来 访问 和 修改 这 个 对 象 的 属性 。 


我 们 根据 对 象 的 文本 描述 创建 了 一 个 货 
< 一 真 价 实 的 Java5cript 对 象 。 








passengers: 2 
Oyert Tle : false 
li leage: 1021 






你 可 以 传递 这 个 对 象 、 获 取 其 中 的 值 、 修 改 其 中 的 值 、 添 加 属性 
或 删除 属性 。 这 些 将 在 各 后 介绍 ， 现 在 再 来 创建 一 些 对 象 。 
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177 


创建 对 象 的 练习 


并 非 只 能 使 用 一 个 对 象 。 稍 后 你 将 看 到 ， 对 象 的 真正 威力 在 于 ， 你 可 以 创建 大 量 的 
对 象 ， 并 编写 代码 来 操作 提供 给 它 的 对 象 。 来 练 练 手 ， 从 头 开始 创建 另 一 个 汽车 对 
象 ， 并 将 其 代码 写 在 下 面 。 





Var cadi = { 


在 这 里 定义 对 
象 的 属性 。 


}; 


C0 


这 是 一 辆 通用 1955 年 产 的 
凯迪 拉克 。 


它 不 是 涂 敌 车 ， 最 多 可 
乘坐 5 人 (后 排 是 一 个 < 
超大 的 凹 背 座 椅 ) 。 = 从 三 





超速 罚单 
ZEC 人 镰 警 察 局 









签发 单位 : 
No 10 


说 明 ] 
别 担心 a re 
的 “交通 规则 ”。 

。 站 双 旬 定义 大 在 和 括号， 


var cat = { 
name. "fluffy" 


}; 


上 号 分 隔 属 性 名 和 属性 


var 机 ( 
diameter: 49528 
a 
号 个 的 守 箱 名 用 作 下 
© 


两 人 同和 的 
var forecast 二 
\ 这 行 不 通 。 


highTene 8282, 2 不 对 
y; 


过 号 分 同属 性 名 和 属性 信 ， 


Hh 各 号 : 


_ 人 属性 信和 后面， 不 深 ) 
在 这 文 里 水 加 


ar superher? = 
name: Batman ， 2 不 能 
1 | 2 \ 

der 请 


VvV 


"Caped Crusa 


}; 


理解 对 象 
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什么 是 面 问 对 象 


何 为 面向 对 象 呢 


到 目前 为 止 ， 我 们 解决 问题 时 ， 都 使 用 一 系列 的 变量 声明 、 和 条件、for/ 
while 语 名 和 国 数 调 用 。 这 是 过 程 型 思维 : 先 这 样 做 ， 再 那样 做 ， 等 等 。 
在 面 品 对 和 象 编程 中 ， 我 们 从 对 象 的 角度 考虑 问题 ， 而 对 象 有 状态 〈 例 如 ， 
汽车 可 能 有 油 位 ) 和 行为 例如， 汽车 可 以 启动 、 行 驶 、 停 放 和 停止 ) 。 
这 是 什么 意思 呢 ?” 面 向 对 人 象 编程 让 你 能 够 解放 思想 ， 从 更 高 的 层次 考虑 
问题 。 来 看 看 手工 烤 面 包 和 使 用 烤箱 烤 面 包 的 差别 吧 。 手 工 烤 面 包 时 ， 
需要 制作 加 热线 圈 ， 将 线圈 连接 到 电源 并 通电 ， 手 持 面 包 放 在 离线 圈 很 近 
的 地 方 烤 ， 然 后 耐心 等 待 ， 等 烤 熟 后 再 将 线圈 断 电 ， 使 用 烤箱 时 ， 只 需 将 
面包 放 入 烤箱 再 按 下 按钮 即 可 。 第 一 种 方式 是 过 程 型 的 ， 而 第 二 种 方式 是 
面向 对 象 的 : 你 有 一 个 烤箱 对 象 ， 让 你 能 够 轻松 地 放 入 并 烤 好 面包 。 




















你 喜欢 面向 对 象 的 哪些 方面 ? 


“ 它 社 我 此 够 以 更 自然 钓 方式 进行 福 计 ， 给 事 师 提供 
了 演进 空间 。” 
一 一 )Joy，27 崔 ， 软 件 介 山 迫 


“不 和合 李 乱 已 蕴 补 过 钓 代码 ， 只 要 天 加 新 功能 子 


一 一 Brad，32 潜 ， 淖 谨 页 


“ 闪 数 据 和 爆 作 数据 钦 方 法 者 组 合 友 了 人 对 弟 中 ， 我 很 
人 





Josh，22 岁 ， 聊 酒 录 党 二 


全 妇 他 访 团 涅 记 中 更 团 代 码 。 纵 写 亲 灶 顺 时， 我 紫 


社 它 愉 角 录 活 ， 从 而 任 产 应 转注 序 中 俯 围 它 。” 
一 一 Chris，39 泡 ,项目 经 吾 


“不 不 雪耻 贷 Chris 刚 才 帘 忽 ， 他 者 5 年 溉 编号 过 一 行 代 
码 了 。” 
一 一 Dary。44 污 ，Chris 手 下 钢 礁 员 
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ge 


假设 你 要 编写 一 个 经 典 的 乒乓 
戏 ， 你 将 创建 哪些 对 象 ? 你 希望 这 些 对 象 有 
哪些 状态 和 行为 ? 


球拍 对 象 


球 对 象 





运动 员 对 象 


运动 员 对 象 






球 街机 电子 游 
月 









Web 镇 最 小 的 汽车 | 


属性 的 工作 原理 





理解 对 象 


var fiat = { 


make: "Fiat", 


color: "Medium Blue", 


\ model: "500", 
° 一 人 year: 1957, 


passengers: 2, 
convertible: false, 
mileage: 88000 


将 属性 者 封 淡 到 对 象 中 后 ， 接 下 来 该 怎么 做 呢 ?” 你 能 查看 这 些 属 性 的 值 、 修 


改 属 性 的 值 、 添 加 属性 、 删 除 属性 ， 还 可 使 用 它们 来 进行 计算 。 


做 一 些 这 样 的 事情 一 一 当然 是 使 用 JavaScript。 


下 面 来 答 试 


如 何 访问 属性 。 要 访问 对 象 的 属性 ， 可 依次 指定 对 象 名 、 句 点 和 属性 名 。 这 


通 第 被 称 为 句 扣 表示 法 ， 看 起 来 类 似 于 下 面 这 样 : 


1 


句点 就 是 一 个 扣 。 


首先 各 定 对 象 名 je ve 


fiat.mileage 一 


可 在 任何 表达 去 中 使 用 属性 ， 如 下 所 示 : 


var miles = fiat.mileage; 
if (miles < 2000) { 

buyIt(); 首先 是 存储 对 象 的 变量 ， 
} 然后 是 句点 和 属性 名 。 


最 后 是 属性 名 


句点 表示 法 

。 句点 表示 法 (.) 让 你 能 够 
访问 对 象 的 属性 。 
例如 ，fiat.color 表 
示 对 象 fi at 的 一 个 属性 ， 
这 个 属性 的 名 称 为 color， 
值 为 "Medium Blue"。 
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使 用 对 象 属性 


如 何 修改 属性 。 随 时 都 可 修改 属性 的 值 ， 只 需 将 一 个 新 值 赋 给 它 即 可 。 
例如 ， 假 设 要 将 前 述 菲 亚 特 的 里 程 设 置 为 10 000 关 里 ， 可 以 这 样 做 : 


fiat.mileage = 10000; 


只 需 指定 要 修改 的 属性 ， 再 将 一 个 新 值 赋 给 它 。 
请 注意 ， 在 有 些 地 方 ， 这 样 做 是 犯法 的 。 


如 何 添加 新 属性 。 可 随时 扩展 对 象 ， 给 它们 添加 新 属性 。 为 此 ， 只 需 
指定 新 属性 并 给 它 贱 值 。 例 如 ， 假 设 要 给 前 述 菲 亚 特 诡 加 一 个 布尔 属 
性 ， 用 于 指出 古人 否 该 洗车 了 了， 可 以 像 下 面 这 样 做 : 


fiat.needsWashing = true; 


ne 
该 属性 ， 和 否则 将 修改 该 属性 的 值 。 





Convertible: false 
ae: 88000 


这 个 新 属性 被 添加 到 对 象 中 。 





如 何 将 属性 用 于 计算 。 将 属性 用 于 计算 很 简单 ， 只 需 像 使 用 其 他 变量 
(或 值 ) 一 样 使 用 它们 。 下 面 是 几 个 示例 : 


可 像 使 用 变量 一 样 使 用 对 象 的 
属性 ， 不 同 点 是 需要 使 用 句点 
表示 法 来 访问 对 象 的 属性 。 


if (fiat.year < 1965) { 
classic = true; 
} 
for (var i = 0; i < fiat.passengers; i++) { 


addPersonToCar(); 


理解 对 象 


下 面 的 代码 被 胡乱 地 贴 在 冰箱 上 ， 请 利用 你 的 对 象 创建 和 句点 表示 法 技 
能 ， 将 它们 放 在 正确 的 位 置 。 请 注意 ， 其 中 有 些 冰 箱 贴 可 能 是 多 余 的 | 











网 入 
dogweignt 着 | riae | 
"fetch balls" dog.activity 


dog.name 













小 狗 对 象 











使 用 这 些 冰箱 贴 来 补 全 
下 面 的 代码 。 
var dog = { 
name: 
: 20.2 
age: 全 
: "mixed", 
activity: Fido 遍 望 你 将 
}; 其 属性 归 位 。 
var bark; 
if ( > 20) { 
bark = "WOOF WOOF"; 
} else { 
bark = "woof woof"; 
} 
var speak = + " says "+ + " when he wants to "+ 2 


console.log(speak); 
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删除 属性 










我 知道 


p 省 ， 
性 。 还 外 


















可 随时 添加 新 属 
E 将 属性 删除 咀 ? 


可 以 ， 你 可 随时 增删 属性 。 你 知道 ， 要 给 对 象 
添加 属性 ， 只 需 指定 一 个 新 属性 并 给 它 赋 值 ， 如 下 
所 示 : 


fido.dogYears = 35; 


从 此 之 后 ，fidqo 就 有 了 新 属性 aogYears。 非 常人 向 
单 。 


要 删除 属性 ， 可 使 用 一 个 特殊 的 关键 字 de lete。 
可 以 像 下 面 这 样 使 用 关键 字 delete: 


delete fido.dogYears; 


删除 属性 时 ， 不 仅 删 除了 属性 的 值 ， 还 删除 了 属性 
本 里 。 因 此 ， 删 除 属性 aogYears 后 ， 如 本 你 试图 
使 用 fido.dogYears， 结 杂 将 为 undefined。 


各 成 功 删 除了 属性 ，dqelete 表 达 式 将 返回 上 rue。 
仅 当 属性 无 法 删除 时 ，qelete 才 返回 false;， 这 
种 情况 是 可 能 出 现 的 ， 例 如 对 象 属于 剖 览 余 而 
受到 保护 。 即 便 你 要 删除 的 属性 在 对 象 中 不 存 
在 ，dqelete 也 将 返回 上 true。 





烛 营 


人 
人 o] : 一个 对 象 最 多 可 包含 多 少 个 属性 ? 


A 
只 ， 想 要 多 少 就 可 以 有 多 少 。 对 和 象 可 以 没有 任何 属性 ， 
也 可 以 有 数 百 个 属性 ， 完 全 由 你 决定 。 


2 

各] ; 如何 创建 没有 属性 的 对 象 ? 
AAA ， 

只 。 像 创建 其 他 对 象 一 样 ， 


像 下 面 这 样 : 


Var lookMaNoProps = { }; 


只 是 不 指定 任何 属性 ， 就 


[9) ， 我 知道 ， 我 刚 问 了 如 何 创建 没有 属性 的 对 象 ， 可 
为 何 要 这 样 做 呢 ? 


AAA ， 
吟 ' ， 根 据 代 码 的 均 辑 ， 你 可 能 想 先 创建 一 个 空 对 象 ， 
再 动态 地 添加 属性 。 随 着 你 不 断 使 用 对 象 ， 你 将 明白 为 
何 要 采用 这 种 创建 对 象 的 方式 。 

Var lookMaNoProps = { }; 
求人 
if (lookMaNoProps.age > 5) 1 


lookMaNoProps.age = 


lookMaNoProps.school = 


} 


"Elementary"; 


\S 
皮 ) ， 与 使 用 一 系列 变量 相 比 ， 使 用 对 象 有 何 优势 ? 毕 
况 对 于 前 述 菲亚特 对 象 的 每 个 属性 ， 都 可 将 其 作为 独立 


的 变量 ， 不 是 吗 ? 


A 

只 ”对象 封 装 了 数据 的 复杂 性 ， 让 你 能 够 专注 于 代码 
的 高 层次 设计 ， 而 不 是 细 枝 末节 。 假设 你 要 编写 一 个 设 
计 10 辆 车 的 交通 模拟 器 ， 你 肯定 希望 专注 于 汽车 、 路 灯 


和 马路 ， 而 不 是 数 百 个 变量 。 对 象 还 让 你 的 工作 更 轻松 ， 


因为 它们 封装 (隐藏 ) 对 象 状态 和 行为 的 复杂 性 ， 让 你 
无 需 操心 这 些 东 西 。 这 些 都 是 如 何 实现 的 呢 ? 等 你 有 了 
更 多 对 象 方 面 的 经 验 后 ， 就 会 明和 白 得 多 。 


[9) 。 试图 给 对 象 添加 既 有 的 属性 时 ， 结 果 将 如 何 ? 
AAA ， 

只 ”试图 给 对 象 添加 虐 有 属性 (如 needsWashing) 
时 ， 将 修改 该 属性 的 值 。 因 此 ， 如 果 你 编写 了 代码 : 


理解 对 象 


fiat.needsWashing = true; 


而 fiat 包 念 值 为 false 的 属性 needsWashing,， 这 将 把 
这 个 属性 的 值 改 为 true。 


bP 

[9) s 试图 访问 不 存在 的 属性 上 时， 结果 将 如 何 ? 例 如 ， 
如 果 我 编写 了 代码 if (fiat.make) { }， 而 fiat 
没有 属性 make， 结 果 将 如 何 呢 ? 


AAA ，。 
只 ”如果 fiat 没 有 属性 make， 表 达 式 fiat.make 的 结 
果 将 为 undqefined。 


> 
网 ; 如 果 在 最 后 一 个 属性 值 后 面 加 上 了 去 号 ， 结 果 将 
如 何 ? 


谷 ， 在 大 多 数 浏览 器 中 ， 这 不 会 导致 错误 。 然 而 ， 在 一 
些 浏 览 器 的 旧版 本 中 ， 这 会 导致 JavaScript 停 止 执行 。 
上 此， 要 确保 代码 能 够 在 尽 可 能 多 的 浏览 器 中 运行 ， 千 万 
不 要 添加 多 余 的 各 号 。 


> 
8 
[9) s 有 可 以 使 用 console.1log 来 将 对 象 显 示 到 控制 台 
吗 ? 
AAA 。 
只 可以， 为 此 只 需 编 写 类 似 于 下 面 的 代码 : 
console.log(fiat); 
这 样 ， 当 你 加 载 网 页 时 ， 如 果 控 制 台 打开 了 ， 你 将 在 控 
制 台中 看 到 有 关 指 定 对 象 的 信息 。 


Java9cript 控 制 台 


> Console.1og(fiat) 


Object {make: "Fiat", model: "500", year: 1957, 


color: "Medium Blue", passengers: 2...) 
> 
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对 象 引 用 


es phe lt 

爱 寻 根 究 底 的 人 想 知道 ……: 

你 知道 ， 变 量 像 是 容器 ， 用 于 存储 值 。 数 字 、 字 符 串 和 布尔 
值 都 很 小 ， 对 象 怎么 样 呢 ?》 变量 可 存储 任何 规模 的 对 象 ， 不 
管 它 包 含 多 少 属性 吗 ? 


变量 并 不 实际 存储 对 象 。 
变量 存储 指向 对 象 的 引用 。 
引用 就 像 指针 ， 是 对 象 的 存储 地 址 。 


换 名 话说， 变量 并 不 存储 对 象 本 身 ， 而 是 存储 类 似 于 指 
针 的 东西 。 在 JavaScript 中 ， 我 们 并 不 知道 引用 变量 存 
储 的 到 底 是 什么 ， 但 我 们 知道 ， 不 管 它 存储 的 是 什么 ， 
它 肯 定 指向 相应 的 对 象 。 


国 当 我 们 使 用 句点 表示 法 时 ，JavaScript 解 释 器 将 负责 根 
据 引 用 获取 对 象 并 访问 其 属性 。 








虽然 我 们 通常 认为 对 象 是 被 塞 到 变量 中 的 ， 但 这 是 不 
能 的 ， 就 像 根本 不 存在 可 伸缩 的 庞大 杯子 ， 能 够 装 下 任何 
By 样 。 相 反 ， 对 象 变量 存储 的 是 指 癌 对 象 的 5 上 用 。 


ee hina 而 对 象 变 
量 表示 一 种 获取 对 象 的 途径 。 在 实际 工作 中 ， 你 只 需 将 对 象 
视 为 像 狗 和 汽车 一 样 的 东西 (而 不 是 引用 ) ， 但 知道 变量 存 
储 的 是 指向 对 象 的 引用 将 在 本 书后 面 派 上 用 场 (再 过 儿 页 你 
就 会 看 到 ) 。 

另外 ， 当 你 将 句点 表示 法 (.) 用 于 引用 变量 时 ， 相 当 于 这 样 
说 : 请 使 用 句点 前 的 引用 来 获取 相应 的 对 象 ， 再 访问 句点 后 
指定 的 属性 。 (请 多 念 儿 帝 ， 将 其 完全 消化 。) 例如 ， 下 述 
代码 的 含义 是 ， 访 癌变 量 car35| 用 的 对 象 的 属性 color。 


Car.color:; 

















Do 
G) 
潍 
Cn 
山 






















对 不 起 ， 我 党 得 这 里 
北 直 下 weis 










喝 ， 这 样 好 
多 了 ， 我 只 需 存 储 一 个 
指向 那个 对 象 的 中 膨 。 





比较 基本 类 型 和 对 银 


可 将 对 象 引 用 视 为 男 一 个 变量 值 ， 这 意味 着 引用 就 像 基 本 类 型 











一 样 ， 也 是 可 以 放 入 杯子 的 。 基 本 类 型 变量 存储 的 是 实际 值 ， 
如 5、26.7、"hi" 或 false; 而 引用 变量 存储 的 是 引用 : 一 种 获 





取 特 定 对 象 的 途径 。 


we 站 





这 些 都 是 基本 类 型 变量 ， 存 储 着 这 个 是 引用 变量 ， 存 储 的 和 
你 赋 给 它们 的 值 。 指向 对 象 的 引用 。 


初始 化 基本 类 型 变量 
声明 并 初始 化 基本 类 型 变量 时 ， 你 赋 给 它 一 个 值 ， 这 个 值 放 
在 变量 这 个 杯子 中 ， 如 下 所 示 : 


Var x = 3; 
和 人 一 个 基本 类 型 
达 个 变量 存储 着 数字 3。 ”| | 下 、 营 本 天 下 
| 值 (数字 ) 。 


初始 化 对 象 ( 引 有 图) 变量 
声明 并 初始 化 对 象 变 量 时 ， 你 使 用 对 象 表示 法 创建 一 个 对 象 ， 
但 这 个 对 象 在 变量 这 个 杯子 中 放 不 下 ， 因 此 实际 放 到 杯子 里 
有 的 是 指 问 这 个 对 象 的 引用 。 

var myCar = {...}; 


变量 中 存储 的 是 指向 汽车 对 象 的 
引导 。 


汽 拿 对象 本 身 六 没有 存储 到 变量 


O 
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稀 后 抢 笃 


我 们 不 知 强 (也 不 
疾 心 ) JavaScript 
解 秩 器 如 和 何 败 不 对 
象 引 用 


我 们 只 知 弱 可 以 倍 
用 自 点 败 示 活 洲 和 沪 
问 对 象 的 属性 ， 











你 现在 的 人 位置， 


回 函 数 传递 对 象 


使 用 对 象 

假设 你 要 物色 一 辆 好 车 ， 供 你 在 Web 镇 使 用 。 你 的 要 求 是 什么 呢 ? 下 面 的 
要 求 怎样 ? 

J 1960 年 或 更 早生 产 。 

J 里 程 不 超过 10 000 瑞 里 。 


你 还 想 利 用 新 学 到 的 编码 技能 rg 因此 你 想 编写 一 个 函数 ， 帮 
你 对 车 辆 进行 预 检 ， 即 如 末 车 辆 合乎 要 求 ， 函数 就 返回 true，;， 如 果 车 辆 不 值得 你 浪 
费时 间 ， 这 个 函数 就 返回 false。 


上 基体 地 谨 ， 你 要 编写 一 个 函数 ， 它 将 一 1 i 数 ， 对 其 进行 检查 ， 并 返回 一 个 
布尔 值 。 这 个 函数 可 用 于 对 任何 汽车 对 象 进行 预 检 。 
下 面 来 莹 试 编写 这 个 国 数 : 你 将 给 它 传递 一 -4 个 海 车 对 象 。 

这 是 所 需 的 函数 。 


function prequal(car) { 


if (car.mileage > 10000) { 








将 句点 表示 法 用 于 形 参 car， 以 访问 属 
性 mileage 和 year。 


return false; 
} else if (car.year > 1960) {1 0 性 的 值 ， 看 它们 是 


return false:; 


) Re 
return true; < 一 false; 人 否则 返 O@true， 表 示 车 辆 通 
过 了 预 检 。 


下 面 来 尝试 使 用 这 个 函数 。 为 此 ， 先 得 有 一 个 汽车 对 象 ， 下 和 面 这 个 怎样 ? 


var taxi = { 
make: "Webville Motors", 尔 党 得 怎样 ? 该 考虑 这 辆 黄色 出 
model: "Taxi", 租车 039? 请 说 明理 由 。 
year: 1955, 


color: "yellow", 
passengers: 4, 
convertible: false, 
mileage: 281341 


上 
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进行 预 检 


关于 对 象 说 得 够 多 了 ， 下 面 来 创建 一 个 ， 并 使 用 图 数 preaqual1 对 其 进行 预 检 。 在 一 人 
这 





简单 的 HTML 页面 (prequal.html) 中 ， 骨 入 下 面 的 代码 ， 然 后 加 载 这 个 网 页 ， 看 看 这 
辆 出 租车 是 否 合乎 要 求 : 
var taxi = { 


make: "Webville Motors", 
model: "Taxi", 

year: 1955, 

color: "yellow", 
passengers: 4, 
convertible: false, 
mileage: 281341 


上 


function PredqdualL(car) { 
if (car.mileage > 10000) { 
return false; 
} else If (car.year > 1960) { 


return false; 


} 


return true; 


var worthALook = prequal(taxi); 


if (worthALook) { 


console.log("You gotta check out this " + taxi.make + " " + taxi.model); 
} else { 
console.log("You should really pass on the " + taxi.make + " " + taxi.model); 


} 


这 辆 出 租 舍 合乎 要 求 咀 


产 人 Java9cript 控 制 台 


You should really pass on the Webville Motors Taxi 


这 是 我 们 得 到 的 输出 。 下 面 来 分 步 
查看 这 些 代码 ， 看 看 这 辆 出 租车 
设 有 通过 预 检 的 原因 。 
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预 检 的 工作 原理 
分 步 进 行 预 检 


0 首先 ， 我 们 创建 了 出 租 全 对 象 ， 并 将 其 赋 给 变量 
taxi。 当 然 ， 变 量 taxi 存 储 的 是 指向 这 个 出 租 全 
对 和 象 的 四 用 ， 而 不 是 对 象 本 身 。 


: "yellow" 


passengers: 4 


var taxi = { ... }); 





接 下 来 ， 我 们 调用 芒 数 prequal， 着 传 入 参 灾 taxi， 
该 实 参 将 被 贼 给 镶 数 形 参 car。 


: "Webville.. 





function prequal(car) { 


J ‘ 


car 和 taxi 指 向 同一 个 对 象 。 





: "yellow" 
passengers: 4 
convertible: false 

nileage: 28134 






接 下 来 ， 我 在 个 数 体 中 对 形 条 car 指 向 的 出 租车 对 象 
进行 预 检 。 


: "yellow" 












passengers: 4 


convertible: false 


if (Car mileagé)> 10000) 1 


return false; 
} else If (car.year )> 1960) { 

CE i CR 
主 ， 因 此 函数 prequal 返 加 false。 真 


return false; 
次 憾 ， 坐 起 来 非常 异 意 。 





(4) 丰 遗 憾 ， 这 绩 出 租 全 和 的 里 程 大 长 ， 因 此 第 一 个 测试 (car.mileage > 10000) 
为 true。 咏 数 返 回 false， 央 此 worthALook 被 设置 为 false。 接 下 来 ， 控 制 
名 中 显示 了 Yov shovld really pass on the Webville Motors Taxi。 
消 数 prequal 返 回 false， JavaScrint 控 制 全 
因此 控制 台 输 出 为 ……: 一 > You should really pass on the Webville Motors Taxi 


var worthALook = prequal(taxi); 





if (worthALook) { 


console.log("You gotta check out this "” + taxi.make + " " + taxi.model); 
} else { 
console.log("You should really pass on the " + taxi.make + " " + taxi.model); 


理解 对 象 


轮 到 你 了 。 这 里 还 有 三 个 汽车 对 象 ;， 将 它们 分 别传 递 给 函数 prequal 
时 ， 结 果 如 何 呢 ? 请 先 通 过 心算 来 回答 ， 再 编写 代码 来 检查 你 的 答案 








是 否 正 确 。 
Var cadi = { var fiat = { 
make: "GM", make: "Fiat", 
model: "Cadillac", model: "500", 
year: 1955, year: 1957, 
Color: "tan", color: "Medium Blue", 
passengers: 5, passengers: 2, 
convertible: false, convertible: false, 
mileage: 12892 mileage: 88000 
}; }; 
prequal(cadi); prequal (fiat); 
在 这 里 填写 函数 
prequal 返 加 的 值 。 si 





var chevy = { 
make: "Chevy", 
model: "Bel Air", 
year: 1957, 
color: "red", 
passengers: 2, 
convertible: false, 
mileage: 1021 


上 


prequal(chevy); 
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传递 对 象 引 用 


更 深入 地 讨论 向 芒 数 传递 对 化 的 情况 


前 面 倍 要 地 讨论 了 实 参 是 如 何 传 递 给 函数 的 : 实 参 古 按 值 传递 的 ， 这 意味 着 传递 的 古 
实 参 的 副本 。 因 此 ， 如 末 我 们 传递 一 个 整数 ， 相 应 的 函数 形 参 将 获得 该 整数 值 的 副本 ， 
以 便 在 函数 中 使 用 它 。 传 递 对 象 时 情况 亦 如 此 ， 但 我 们 必须 更 深入 地 人 研究 按 值 传递 对 
对 象 来 说 意味 着 什么 ， 这 样 才能 明白 癌 函 数 传递 对 象 时 发 生 的 情况 。 


你 知道 ， 将 对 象 赋 给 变量 时 ， 变 量 存 储 的 是 指向 对 象 的 引用 ， 而 不 十 对 象 本 壬 。 再 次 
重申 ， 可 将 引用 视 为 指 癌 对 角 的 指针 。 

















~ name: "Fido" 
. weight: 40 : 
breed: “Mixed" | 


~ loves: “walks" 





将 对 象 赋 给 变量 时 ， 变 
量 存 储 的 是 指向 对 象 的 
引用 ， 而 不 是 对 象 本 身 。 


因此 ， 调 用 函数 并 向 它 传递 一 个 对 象 时 ， 传 递 的 是 对 象 引 用 ， 而 不 十 对 象 
本 壬 。 根 据 按 值 传递 的 语义 ,传递 给 形 参 的 古 该 引用 的 副本 ， 而 原来 的 引 
用 依然 征 指 加 原始 对 象 的 指针 。 


形 参 变量 dod 和 fido 指 向 同一 个 对 象 。 


function bark(dog) { 





code here 


} 调用 函数 bark 并 将 fido 作 为 实 参 传递 给 
bark (fido); 它 时 ， 形 参 dog 将 是 这 个 引用 的 副本 。 





这 意味 着 什么 呢 ? 一 个 最 大 的 不 同 征 ， 如 用 你 在 国 数 中 修改 对 象 的 属性 ， 修 改 的 将 二 
原始 对 象 的 属性 。 因 此 ， 函 数 结束 时 ， 在 函数 中 对 对 象 所 做 的 修改 部 依然 有 效 。 下 面 
通过 一 个 示例 来 详细 说 明 这 一 扩 。 
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zfido 减 减肥 

假设 我 们 要 测试 一 种 给 小 狗 瘦 身 的 新 方法 ， 并 要 在 一 个 名 为 
loseWeight 的 函数 中 实现 这 种 减肥 方法 。 你 只 要 将 小 狗 对 象 传递 给 
国 数 1oseweight， 并 指定 要 减 去 多 少 ， 小 狗 的 体重 就 会 减 下 来 ， 就 
像 变 魔术 一 样 。 下 面 是 其 中 的 工作 原理 。 


首先 来 看 着 小 狗 对 象 Eido， 我 们 将 把 它 传 递 给 鸟 数 
loseWeight, 





( 这 是 小 狗 对 象 。 


fido 是 一 个 指向 对 象 的 引用 ， 

这 意味 着 这 个 对 象 并 没有 存储 
在 变量 fido 中 ， 而 只 是 被 变量 
fido 指 向 而 已 。 






name: "Fido” 
weight: 48 
breed: “Mixed" : 


loves: ‘walks” 





loseWeight (fido，10); ”我 们 将 fido 传 递 给 函数 Dog 
时 ， 传 递 的 是 指向 对 象 
的 引用 。 


咏 数 loseWeight 的 形 参 dog 是 fido 存 储 的 四国 的 副本 ， 
” 有 因此 修改 这 个 形 参 变量 的 属性 时 ,将 影响 传 入 的 引 有 图 指 


向 的 对 象 。 
将 fido 传 递 给 loseWeight 时 ， 赋 给 形 优 引用 dog 是 引用 fido 
dog 的 是 引用 (而 不 是 ) 对 象 的 副本 ， 的 副本 。 





因此 fido 和 doq 指 向 同一 个 对 象 。 





1 5 http:/ /localhost ge 
Mo now weighs 38 
function loseWeight(dog, amount) { 


dog.weight = dog.weight - amount; €—— Bey A ee A 
4 J， 胞 CX 下 
fido.weight 的 值 。 


alert(fido.name + " now weighs " + fido.weight); 
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KC 


隆 笔 上 阵 


有 人 给 你 提供 了 一 个 绝密 文件 ， 还 有 两 个 让 你 能 够 获取 和 设置 该 文件 内 容 
的 函数 ， 但 要 使 用 这 两 个 函数 ， 你 必须 知道 正确 的 密码 。 第 一 个 函数 是 
getSecret， 它 在 密码 正确 时 返回 文件 的 内 容 ， 并 将 每 次 访问 尝试 都 记录 
在 案 。 第 二 个 函数 是 setSecret， 它 修改 文件 的 内 容 ， 并 将 访问 次 数 重 置 
为 零 。 你 的 任务 是 补 全 下 面 的 JavaScript 代 码 ， 并 对 完成 后 的 函数 进行 测试 。 





function getSecret(file, secretPassword) { 


.OPened = .OPened + 1; 
if (secretPassword == .password) { 
return .Contents; 


} 
else 1 


return "Invalid password! No secret for you."; 


} 


function setSecret(file, secretPassword, secret) ({ 
if (secretPassword == .Password) { 
.Opened = 0; 


.Contents = secret.; 


var superSecretrFile = { 

level: "classified", 

opened: 0, 

password: 2, 

contents: "Dr. Evel's next meeting is In Detroit." 
}; 
var secret = getSecret( 7 ) 7 


console.log(secret); 


setSecret( 5 / "Dr. Evel's next meeting is in Philadelphia."); 
secret = getSecret( ); 


console.log(secret); 
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理解 对 象 











机 ， 这 个 家 亿 


<Idoctype html> 
<html lang="en"> 
<head> 
<title>Object-o-matic</title> 
<meta charset="utf-8"> 
<script> 
function makeCar() { 


我 又 来 3， 这 次 带 来 的 是 汽车 自动 制造 
能 够 让 你 一 天 到 晚 不 断 地 人生 


产 新 汽车 。 







var makes = ["Chevy", "GM", "Fiat", "Webville Motors", "Tucker"]; 
Var models = ["Cadillac", "500", "Bel-Air", "Taxi", "Torpedo"]; 
var years = [1955, 1957, 1948, 1954, 1961]; 
var colors = ["red", "blue", "tan", "yellow", "white"]; 
Var convertible = [true, falsel]; 
Var randl = Math.floor(Math.random() * makes.length); ~、 _ 二 
var rand2 = Math.floor(Math.random() * models.length); 守 © 动 制 造 器 与 第 4 
Var rand3 = Math.floor(Math.random() * years.length); 章 的 目 动 造句 应 用 程序 
var rand4 = Math.floor(Math.random() * colors.length); 类 似 ， 但 其 中 的 单词 表 
var rand5 = Math.floor(Math.random() * 5) + 1; 示 的 是 汽车 属性 ， 并 且 
var rand6 = Math.floor(Math.random() * 2); 生成 的 是 汽车 对 象 ， 而 
不 是 广告 语 | 

var car = { 

make: makes[randll], 

model: models[rand2], 

year: years[lrand3], 

color: colors[rand4], 

passengers: rand5, 区 

convertible: convertible[rand6], 看 看 它 的 功能 和 

mileage: 0 工作 原理 吧 。 


上 


return car:; 


function displayCar(car) { 


console.log("Your new car is a " + car.year + " 


} 


var carToSell makeCar(); 
displayCar(carToSell); 


</script> 
</head> 
<body></body> 
</html> 


"+ car.make +" "+ car.model); 
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汽车 自动 制造 机 的 工作 原理 


汽车 自动 制造 机 


推销 自动 造句 应 用 程序 的 那个 家 伙 又 来 推销 自动 汽车 制造 机 (Auto-O- 
Matic) 了 ， 这 种 机 袁 可 整 天 不 同 断 地 生产 已 停产 的 汽车 。 换 句 话 说， 
它 不 生成 广告 语 ， 而 是 生成 品牌 、 型 写 、 年 份 等 汽车 对 象 的 属性 ， 犹 如 
汽车 工厂 。 下 和 面 来 详细 看 看 其 工作 原理 。 











(1) 首先 是 一 个 makeCcaz 国 数 ， 我 们 可 随时 调用 它 来 生产 新 汽车 。 在 这 个 国 数 
中 ， 有 4 个 表示 汽车 品牌 、 型 号 、 生 产 年 份 和 颜色 的 数组 ， 还 有 一 个 表示 汽 
车 是 否 有 可 折 登 车 篷 的 数组 。 我 们 生成 5 个 随机 数 ， 以 便 从 这 5 个 数组 中 随机 
选择 品牌 、 型 号 、 生 产 年 份 、 颜 色 以 及 是 否 有 可 折合 车 篷 。 我 们 还 生成 了 另 
一 个 随机 数 ， 用 于 表示 核定 载 客 人 数 。 








我 们 可 从 这 4 个 数组 中 选择 多 种 品牌 、 


区 型 号 、 生 产 年 份 和 颜色 。 


var makes = ["Chevy", "GM", "Fiat", "Webville Motors", "Tucker"]; 


Var models = ["Cadillac", "500", "Bel-Air", "Taxi", "Torpedo"]; 
var years = [1955, 1957, 1948, 1954, 1961]; 
var colors = ["red", "blue", "tan", "yellow", "white"]; 


Var convertible = [true, falsel]; 


人 _ 我 们 将 从 这 个 数组 中 选择 属性 convertible 


的 值 (true 或 false) 。 


/一 en 随机 数 


var randl = Math.floor(Math.random() * makes.length); 数组 中 随机 地 选择 值 。 

var rand2 = Math.floor(Math.random() * models.length); 

Var rand3 = Math.floor(Math.random() * years.length); 

var rand4 = Math.floor(Math.random() * colors.length); 

Var rand5 = Math.floor(Math.random() * 5) + 1; 人 一 我 们 将 这 个 随机 数 作为 核定 载 客 

var rand6 = Math.floor(Math.random() * 2); 人 人数。 将 随机 数 加 上 1， 确 保 洛 
车 的 核定 载 客人 数 不 少 于 1。 


~ 我 们 根据 这 个 随机 数 确定 汽车 是 
否 有 可 折 重 车 您。 


(2) 这 里 不 像 自动 造句 应 用 程序 那样 将 各 种 汽车 属性 拼接 成 一 个 字符 串 ， 而 是 使 
” 用 它们 来 创建 新 对 象 car， 它 有 你 期 望 的 所 有 属性 。 Re 
make、 model、year 和 color 的 值 , 我 们 使 用 了 第 1 步 创 建 的 随机 数 ， 我 们 还 添加 了 


passengers、convertible 和 mileade 必 性。 
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a 
项 


站 


var car = { 


}s 


make: makes[randll], 
model: models[rand2], 
year: years[rand3], 
color: colors[rand4], 


passengers: rand5, 


convertible: convertible[rand6], 


mileage: 0 


人 最 后 


理解 对 象 


我 们 创建 一 个 新 的 汽车 对 象 ， 其 属 
性 的 值 是 从 数组 中 选择 出 来 的 。 


我 们 还 将 核定 载 客人 数 设 置 为 前 面 创建 
j 刀 “的 一 个 随机 数 ， 并 使 用 数组 convertible 
将 属 i 置 为 true 或 false。 


， 将 属性 mileage 设 置 为 O 


(因为 这 是 一 辆 新 车 ) 。 


(8) : 国 数 makecar 的 最 后 一 条 语句 返回 新 对 象 car。 


return car; 


从 国 数 返 回 对 象 与 返回 其 他 值 没 什么 两 样 。 下 面 来 看 看 调用 函数 makeCa 


的 代码 : 
function displayCar(car) { 到 
别 忘 了 ， 你 返回 了 一 个 指向 
console.log("Your new car is a " + car.year + " "+ es ? 
car.make + " " + car.model); ee 引用 ， 并 将 其 由 


} 


Var carToSell = makeCar(); 


displayCar(carToSell); 


首先 调用 函数 makeCar， 并 将 它 返 


diespplaviar, 


人 


(4) 请 在 剖 


钟 部 有 村 


这 是 你 的 新 车 。 在 我 们 看 来 ， 1957 年 


产 的 菲 亚 亚 特 出 租车 很 不 错 。 CA 


上 I 鉴 口 日 


山 奉 


起 来 。 你 将 发 现 ， 你 楚 


重出 生 ”。 


回 的 值 赋 给 z 
接 下 来 ， 我 们 将 makecatr 返 回 的 汽车 对 象 传 递 给 
它 所 做 的 只 是 在 控制 台中 显示 这 个 对 象 的 一 些 属 





给 了 变量 carToSell。 


oarTosell. 


国 数 


汽车 对 象 


var carToSell = makeCar(); 


中 加 载 这 个 自动 汽车 制造 机 (autoomatic.html) ， 让 它 运 转 
有 生成 多 少 新 车 就 能 生产 多 少 ， 但 别 忘 了 ，“ 每 分 


Javascript 控 制 合 


Your new car is a 1957 Fiat Taxi 


像 我 们 这 文 样 多 次 次 重 
新 加 载 这 个 网 页 ! 


Your new car is a 1961 Tucker 500 


Your new car is a 1948 GM Torpedo 
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添加 行为 


如 何 给 对 象 添加 行为 


你 不 会 认为 对 象 只 能 用 于 存储 数字 和 字符 串 吧 ? 对 象 是 活动 的 ， 能 够 做 事情 。 小 狗 
不 会 一 直 静 静 地 坐 着 ， 它 们 还 会 叫 、 跑 、 玩 接 球 游戏 。 小 狗 对 象 也 如 此 1! 同 理 ， 我 
们 可 以 开车 、 停 车 、 倒 车 和 刹车 。 利 用 本 章 介绍 过 的 知识 ， 你 完全 能 够 给 对 象 添 加 
行为 ， 如 下 所 示 : 








Va fiat = { 
make: "Fiat", 
model: "500", 


year: 1957, 
color: "Medium Blue", 可 以 像 这 样 直接 给 

passengers: 2, > 对 象 未 加 部 数 。 

convertible: false, 尔 需 要 做 的 只 是 将 函数 定义 赋 给 


mileage: 88000, 属性 。 是 的 ， 属 性 也 可 以 是 函数 | 


drive: function() { ce 注意 到 在 函数 定义 中 没有 指定 函数 
alert.log("Zoom zoom!"); 名 ,而 只 是 在 关键 字 function 后 面 提 


} 供 函 数 体 。 属 性 名 就 是 函数 名 。 


1 


稍微 说 说 术语 的 问题 : 对 于 对 象 内 的 函 
数 ， 我 们 通常 称 之 为 方法 。 在 面向 对 象 
领域 ， 将 对 象 内 的 函数 统称 为 方 运 。 





要 调用 函数 drive， 准 确 地 说 是 方法 darive， 也 使 用 句点 表示 法 : 用 句点 将 对 象 名 
(fiat) 和 属性 名 (drive) 连接 起 来 ， 并 在 属性 名 后 面 加 上 圆 括号 ， 就 像 调用 其 他 


国 数 一 样 。 
fiat.drive(); 一 AN 


我 们 使 用 句点 表示 法 来 访问 对 

家 fiat 内 的 六 数 束 候 访 凤 The page at localhost says: 
他 属性 一 样 。 这 条 语句 的 含义 和 @ es 

是 调用 对 象 fiat 的 方法 drive。 





人 调用 对 象 fiat 的 方法 
drive 的 结果 。 


198 ”第 5 章 


改进 方法 drive 


下 面 来 让 fiat 对 象 的 行为 更 像 汽 车 。 对 大 多 数 汽 车 来 说 ， 只 有 局 动 发 动机 
后 才能 开动 。 如 何 模拟 这 种 行为 呢 ? 为 此 ， 需 机: 





J 一 个 布尔 属性 ， 用 于 存储 汽车 的 状态 (发 动机 定 否 
HB 


J 两 个 方法 ,分 别 用 于 启动 和 熄 汉 发 动机 ; 
J 在 方法 drive 中 检查 杀 件 ， 确 保 仅 当 发 动机 启动 后 
才能 开动 汽车 。 


下 面 首先 添加 了 布尔 属性 started 以 及 启动 和 熄灭 发 动机 的 方法 start 和 
stop， 再 修改 方法 drive， 使 其 根据 属性 started 决 定 是 否 开动 汽车 。 





var fiat = { 


make: "Fiat", 
model: "500", 


year: 1957, 
color: "Medium Blue", 
ea 存储 发 动机 当前 状态 的 属性 (true 表示 发 


mileage: 88000, 
started: false, 


convertible: ~/ 动机 已 启动 ，false 表 示 发 动机 已 煌 灭 ) 。 


start: function() { 二 一 一 启动 发 动机 的 方法 ， 当 前 它 只 是 


started = true; 将 属性 started 设 置 为 true。 
} 
stop: function() { 爆 灭 发 动机 的 方法 ， 它 只 是 
started = false; 将 属性 started 设 置 为 false。 
> 


drive: function() { 
If (started) { 
alert("Zoom zoom!"); 
} else { 


alert("You need to start the engine first."); 


ee 当 你 试图 开动 汽车 时 ， 如 果 发 动机 
已 启动 ， 将 显示 Zoom zoom!， 否 则 你 将 被 告知 要 先 忆 动 发 动机 。 


理解 对 和 象 


你 编写 了 一 个 方法 来 修改 属性 started， 
而 没有 直接 修改 ， 和 这 很 有 趣 。 为 付 么 要 
这 样 做 呢 ? 如 果 直 接 修 改 这 个 属性 ， 需 
要 的 代码 不 是 更 少 吗 ? 













好 眼力 。 你 说 得 对 ， 要 启动 发 动机 ， 可 使 用 代码 fiat. 
started = true; 和 而 个 是 fiat.start();。 这样 就 无 需 
编写 启动 发 动机 的 方法 了 。 

为 何不 直接 修改 属性 started， 而 要 创建 并 调用 方法 
start 呢 ?使 用 方法 来 修改 属性 是 男 一 种 封 浅 方式 ， 它 让 
对 象 决 定 如 何 完 成 工作 ， 通 党 可 改善 代码 的 可 维护 性 和 
可 扩展 性 。 通 过 让 方法 start 负 责 启 动 发 动机 ， 你 就 无 需 
知道 如 下 细 证 :为 启动 发 动机 ， 需 要 获取 属性 starteq， 
并 将 其 设置 为 true。 


你 可 能 还 是 会 说 ， 这 有 什么 大 不 了 的 ， 为 何不 直接 将 这 个 
属性 设置 为 true 来 启动 发 动机 呢 ? 假 设 有 一 个 非常 复 厅 
的 start 方 法 ， 需 要 确定 安全 带 已 系 好 、 确 保 油 料 充足 、 
检查 电瓶 、 检 查 发 动机 温度 等 ， 然 后 再 将 started 设 置 
为 true。 你 肯定 不 想 在 开车 前 考虑 所 有 这 些 细 市 ， 而 希 
望 能 够 调用 一 个 方法 来 完成 这 些 工 作 。 通 过 将 这 些 细 市 
都 放 在 一 个 方法 中 ， 让 你 只 需 问 对 象 发 出 指令 ， 由 对 象 
去 操心 如 何 执行 这 些 指令 即 可 。 























理解 对 象 





则 试 对 象 Eiat 


来 测试 一 下 改进 后 的 对 象 fiat。 我 们 将 进行 全 面 测 试 : 在 没有 启动 发 动机 的 情 
况 下 尝试 开动 ， 再 启动 发 动机 、 开 车 并 烛 火 。 为 此 ， 在 一 个 简单 的 HTML 页 面 
(carWithDrive.html) 中 髓 入 对 象 fiat 的 代码 ， 再 在 这 些 代 码 后 面 输 入 如 下 代码 . 





RN < 一 首先 ， 我 们 尝试 开动 汽车 ， 这 将 显示 一 
fiat.start(); 《一 条 消息 ， 让 我 们 先 启动 发 动机 。 然 后 ， 
fiat.drive(); 一 一 我 们 启动 发 动机 ， 并 开动 汽车 。 最 后 ， 
fiat.stop(); 2 一 我 们 烛 灭 发 动机 。 


在 浏览 器 中 加 载 这 个 网 页 ， 开 始 一 次 自驾 游 吧 | 


别 着 急 


如 果 你 开 不 动 汽 车 对 象 fiat 也 很 正常 。 实 际 上 ， 如 果 打 JavaScript 控 制 全 
开 JavaScript 控 制 台 ， 你 很 可 能 看 到 一 条 类 似 于 后 面 的 消 | 
息 ， sa ~—> 


到 底 是 怎么 回 事 呢 ?” 咱 们 来 仔细 研究 方法 darive， 看 看 
当 我 们 使 用 fiat .drive() 试 图 开动 这 辆 汽车 时 发 生 的 情 
1 













Sn 我 遇 到 了 并 
似 于 变量 的 started,， 需 要 确 
定 它 是 在 哪里 定义 的 。 










啊 ， 我 被 调转 了 ! 
该 开工 了 。 















对 于 变量 ， 我 总 
是 首先 在 鲜 数 本 地 查找 。 






没有 ， 本 地 没有 定义 变量 












O 
drive: function() { started,。 
if (started) { 
S65 
} Sra 
9 也 许 started 是 
} D 这个 印 数 的 形 参 。 不 是 ， 








没有 这 样 的 形 验 。 






它 可 能 是 一 个 全 
变量 ? 不 是 。 就 这 么 着 吧 ， 
定 是 代码 有 错 。 
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this 关 键 字 


为 何方 法 drive 不 知道 属性 started 
原因 如 下 : 在 对 象 fiat 的 方法 中 ， 我们 原本 要 引用 属性 started, 但 函 
数 中 引用 的 变量 通常 被 解析 为 局 部 变量 、 商 数 形 参 或 全 局 变量 。 在 方法 
drive 中 , started 不 属于 上 述 任何 一 种 变量 ， 而 是 对 象 fiat 的 一 个 属性 。 
虽然 如 此 ， 代 人 码 也 该 能 正确 地 运行 吧 ? 换 名 话说， 我 们 在 对 象 Eiat 中 定义 
了 started，JavaScript 应 该 足够 聪明 ， 知 意 我 们 指 的 是 属性 started 吧 ? 
正如 你 看 到 的 ， 它 不 知道 。 怎 么 会 这 样 呢 ? 


情况 是 这 样 的 : 在 方法 arive 中 ， 看 起 来 像 变 量 的 started 实 际 上 是 对 象 
的 一 个 属性 ， 但 我 们 没有 告诉 JavaScript 它 是 哪个 对 象 的 属性 。 你 可 能 会 















要 让 我 知道 是 哪个 对 旬 
的 属性 started， 你 必 
须 明 确 地 指出 这 一 点 。 





O 
9 


drive: function() { 


说 ， 我 们 说 的 显然 是 当前 对 象 ， 这 不 是 明摆着 的 吗 ! 有 什么 不 清楚 的 呢 ? if (started) { 
是 的 ， 我 们 的 本 意 是 当前 对 象 的 属性 。 事 实 上， 有 一 个 JavaScript 关 键 字 ee. 
this， 可 使 用 它 来 告诉 JavaScript， 你 说 的 是 当前 所 处 的 对 象 。 } 

} 


下 面 来 加 上 关键 字 this， 让 这 些 代 码 能 够 正常 运行 : 


var fiat = { 
make: "Fiat", 
// 其 他 属性 。 为 节省 篇 幅 ， 这 里 省 略 了 它们 


started: false, 


start: function() { 


this.started = true; < 每 次 引用 属性 started 

}, 时 ， 都 在 它 前 面 加 上 
this 和 和 句点， 告诉 

stop: function() { 人 Java5cript 解 释 器 你 
this.started = false; 说 的 是 当前 对 象 的 

) 属性 started， 以 多 


ee JavaScript 以 为 你 引用 
drive: function() { 的 是 一 个 变量 。 


if (this.started) { 
alert("Zoom zoom!"); 
} else I 
alert("You need to start the engine first."); 
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理解 对 和 象 


测试 关键 宁 this 


请 修改 你 的 代码 ， 并 党 试 运行 它们 | 
二 们 得 到 | 的 结 果 如 下 , 和 @ The page at localhost says: 


You need to start the engine first. 
The page at localhost says: 
Zoom zoom 








pre St A @ 
yl 3 下 面 的 JavaScript 代 碚 存在 一 些 钳 误 ， 你 的 任务 是 奖 身 漠 览 器， 将 泛 
全 | 些 钳 误 找 出 来 。 有 党 成 放 个 绒 习 后 ， 涝 勒 到 杰 重 末尾 ， 着 着 你 是 否 找 出 
了 了 所 有 的 错 尝 。 






Var song = { 
name: "Walk This Way", 
artist: "Run-D.M.C.", 
minutes: 4, 
seconds: 3, 
genre: "80s", 
playing: false, 


play: function() { 
if (Iplaying) { 
this = true; 
在 这 里 标 出 代码 中 的 错误 。 console.log("Playing " 
入 vv 一 + name + " by " + artist); 


}, 
pause: function() { 
if (playing) 


this.playing = false; 
} 


}; 
this.play 人 (); 


this.pause(); 
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理解 this 


关键 字 this 的 工作 原理 


可 将 this 视 为 一 个 变量 ， 指 辣 其 方法 被 调用 的 对 象 。 换 句 话 说 ， 
如 果 你 使 用 fiat .start() 调 用 对 象 fiat 的 方法 start, 并 在 方法 
start 中 使 用 this, 那么 this 将 指 同 对 象 fiat。 下 面 来 更 深入 地 研 
究 调 用 对 象 fiat 的 方法 start 时 发 生 的 情况 





首先 ， 我 们 有 一 个 表示 菲亚特 汽车 的 对 象 ， 并 将 其 赋 给 了 变量 fiat。 


这 是 菲亚特 汽车 对 象 ， 其 
RS M9 包 信 所 有 的 属性 名 和 居 
start: nctiom( 2 SS 性 值 5 人 不 有 方法 start。 


this.started = Re 





eo: FunCtdonl() tS Fas 


jives: Ee ET On A 
ee ot 












在 这 里 ，this 指 向 对 象 fiat， 
四 为 我 们 调用 的 是 对 象 fiat 
接 下 来 ， 我 们 调用 方法 start，JavaScript 人 负责 将 对 象 Eiat 赋 给 的 万 法 start。 


this, 





start: funckion() 1 


started = true; 


> 


fiat.start().; , 


每 当 我 们 调用 对 象 的 方法 时 ，this 都 将 指向 这 个 对 象 。 
因此 ， 在 这 里 this 指 向 对 象 fiat。 





要 理解 关键 字 this， 关 键 在 于 每 当 方 法 被 调用 时 ， 在 该 方法 体内 
都 可 使 用 this 来 引用 方法 被 调用 的 对 象 。 为 了 帮助 你 理解 透彻 ， 
尝试 调用 其 他 几 个 对 象 的 方法 。 


如 果 你 调用 对 象 chevy 的 方法 start， 则 在 这 个 方法 中 ，tnis 指 问 
的 将 是 对 人 象 chev y。 


true; 


chevy .start () ; 


在 对 象 上 taxi 的 方法 start 中 ，this 指 同 的 是 对 象 上 axi。 


七 aXIL .start(),; 


\ > 


隆 笔 上 阵 


.started = 七 rue:; 


‘ft 





Var eightBall = { index: 0， 
advice: ["yes", "no", "maybe", 
shake: function() { 
this.index = 
IE ( .Index >= 


.index = 0; 


} 
}, 
look: function() { 
return .advicel[ 
} 
上 重复 执行 这 些 代 码 多 次 ， 对 
eightBall.shake(); 你 补 全 的 代码 进行 测试 。 


console.log(eightBall.look()); 








理解 对 象 


-~ > yn 
make: GE 
model: "Bel Air™ 


: 有 
OropcTteSNSFe 时 


Mstarted: false 
Stonmee uct iond( EST 
this.started = true; 
op nee ES 
ele FUGtion( 







: "Webville... 
odel: "Taxi" | SS 


， 和 
.. more properties here . 






started: false 


Saas eurnctioan(y 






this.started = true; 






ES 







eic 
jrive : ECG 
bh 沁 








请 利用 新 学 到 的 有 关 this 的 知识 补 全 下 面 的 代码 ， 答 案 见 本 章 末 尾 。 


"not a chance"], 


.ijndex + 工 ; 


.advice.length) { 


.index]; 


JavaScript 控 制 侣 


ele 





maybe 


not a chance 
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天 于 函数 的 问 是 


y 
[9) * 方 法 和 函数 有 何不 同 ? 


A 
从 ， 方 法 是 在 对 象 中 赋 给 了 属性 名 的 


函数 。 你 通过 有 函数 名 来 调用 有 函数 ， 而 
调用 方法 时 ， ee te 


和 属性 名 。 在 万 法 中 ， 你 还 可 使 用 关 
键 字 this 来 引用 方法 被 调用 的 对 象 。 


® 

[9) * 我 注意 到 在 对 和 象 中 使 用 关键 字 
function 时 ， 没 有 显 式 地 给 函数 指 
定名 称 。 这 种 函数 的 名 称 是 什么 呢 ? 
AAA ， 

只 "， 是 这 样 的 。 为 调用 方法 ， 我 们 使 
用 对 象 中 相应 的 属性 名 ， 因 此 无 需 显 
式 地 给 这 种 函数 命名 ,以便 用 来 调用 
它 。 就 现在 而 言 ， 将 此 视 为 一 种 约定 
即 可 ， 本 书后 面 将 深入 探讨 匿名 池 数 ， 
即 未 被 显 式 命名 的 函数 。 


[9) ;a 
以 吗 ? 


A 
吟 ' 可以。 方法 其 实 就 是 函数 ， 将 
其 称 为 方法 只 是 因为 它们 位 于 对 象 中 。 


ye" 


如 果 你 


函数 可 以 有 局 部 变量 ， 方 法 也 可 


:将 方法 start、 
须 如 何 修改 才能 


206 全 入 = 
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吓 JD 早 





局 将 


因此 ， 了 有 函数 能 做 的 ， 方 法 都 能 做 ， 


> 
各) :那么 ， 也 可 以 从 方法 返回 值 吗 ? 


AAA ， 

吟 " 可 以 。 看 看 我 们 在 上 一 个 回答 中 
有 是 怎么 说 的 | 
站 弟 实 参 
AAA ， 

只 "可以! 难道 你 没 


的 答案 吗 ? 


有 看 前 两 个 问题 


i 8 

[9) s 创建 对 象 后 ， 可 以 向 添加 属性 一 
样 添加 方法 吗 ? 

FF 

只 可以， 可 将 方法 视 为 被 赋 给 属性 
的 函数 ， 因 此 可 随时 添加 新 方法 : 

// 添加 方法 engageTurbo 
car.engageTurbo = 


function() { ... }; 


》 

加 ); 在 添加 的 方法 (如 前 面 的 
engageTurbo) 中 ， 也 可 以 使 用 关键 
字 this 吗 ? 


党 们 提 田 荫 亚 妥 台 请 昭 “党 人世 崩 乐 者 瞪 必 5 以 加 i 部 


AAA ， 
号 " ,可 以 。 别 忘 了 ， 调 用 方法 时 ， 将 
把 方法 被 调用 的 对 象 赋 给 this，。 


》 

[5) sthis 的 值 在 什么 时 候 被 设置 为 
相应 的 对 象 ? 是 在 定义 对 象 时 还 是 调 
用 方法 时 ? 


AAA ， 

只 ”在 你 调用 方法 时 ，this 的 值 补 
设置 为 相应 的 对 梨 。 因 此 ， 当 你 苦 
用 所 于 二 下 三 芷 间 二 艺林 二 放生 训 入 以 首 为 
evy, start() 
时 ，this 被 设置 为 chevy。 看 起 来 
好 像 this 是 在 你 定义 对 象 时 被 设置 
的 ， 国 为 在 fiat ,Start 中 ， 主 his 六 
是 被 设置 为 fiat， 而 在 chevy.start 
中 ，this 总 是 被 设置 为 chevy， 但 你 
将 在 本 书后 面 看 到 ， 有 充分 的 理由 表 
明 this 是 在 你 调用 方法 而 不 是 定义 对 
象 时 设置 的 。 这 一 点 很 重要 ， 我 们 将 
肥 复 讨论 。 


stop 和 drive 复 制 到 前 面 创建 的 对 象 chevy 和 cadi 中 ， 必 
让 它们 正确 地 工作 ? 


理解 对 象 


该 把 整个 车 队 拉 出 来 “多 负 ” 了。 给 每 个 汽车 对 象 都 添加 方法 drive， 然 后 添加 对 
它们 进行 发 动 、 驾 驶 和 熄火 的 代码 。 管 案 见 本 章 末 尾 。 








< 


var cadi = { 给 每 个 汽车 对 象 都 计 加 属性 
make: "GM", started 和 下 面 的 方法 ， 再 使 
model: "Cadillac", 用 下 面 的 代码 来 测试 它们 。 
year: 1955, 


Color: "tan", 
passengers: 5, 
convertible: false, 
mileage: 12892 


started: false, 
上 start: function() { 


this.started = true; 
> 


stop: function() { 


var chevy = { . 
make: "Chevy", this.started = false; 我 们 稍 和 、 改进 了 de 
model: "Bel Air", }, 诸 你 务 多 从 使 用 这 些 新 代码 
year: 1957, 


drive: function() { 
if (this.started) { 
alert(this.make + " "+ 
this.model + " goes zoom zoom!"); 
} else { 
alert("You need to start the engine first."); 


i pn 


Color: "red", 
passengers: 2, 
convertible: false, 
mileage: 1021 


}; 





var taxi = { 
make: "Webville Motors", 在 汽车 对 象 定义 后 是 不 
model: "Taxi", 加 这 些 代码 ， 对 所 有 对 cadi.start(); 
year: 1955, 象 都 进行 测试 。 cadi.drive(); 


color: "yellow", Sp 


passengers: 4, 
convertible: false, 
mileage: 281341 ~ 


chevy.start(); 
chevy.drive(); 
chevy.stop(); 
, taxi.start(); 
}; taxi.drive(); 


添加 新 属性 时 ， 别 忘 0 taxi.stop(); 
性 mileago 后 面 加 上 语 








你 现在 的 位 置 ， 207 


避免 代码 重复 
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串 5 重 


我 们 将 方法 复制 寡 粘 贴 到 了 各 个 汽车 
对 象 中 ， 很 多 代码 都 是 重复 的 。 有 没有 
更 好 的 办 法 ? 














哇 ， 好 眼力 。 


是 的 ， 将 方法 start、stop 和 drive 复 制 到 每 个 汽车 
对 象 中 ， 显 然 会 导致 大 量 的 重复 代码 。 在 每 个 汽车 对 
象 中 ， 其 他 属性 的 值 都 各 不 相同 ， 但 所 有 对 象 的 方法 
都 相同 。 


如 东 你 认为 这 挺 好 ， 征 在 重用 代码 ， 请 不 要 这 么 快 下 
结论 。 我 们 确实 是 在 重用 这 些 代 码 ， 但 这 种 重用 是 
通过 复制 实现 的 : 不 是 只 编写 一 次 ， 而 是 编写 了 很 多 
次 ! 如 采 要 改变 qzrive 方 法 的 工作 方式 ， 结 末 将 如 何 
呢 ? 必须 重新 编写 每 个 汽车 对 象 的 darive 方 法 。 这 不 
好 ， 不 仅 浪费 时 间 ， 还 容易 出 错 。 


还 有 一 个 比 简单 复制 粘贴 更 严重 的 问题 : 我 们 假定 给 
对 象 添加 前 述 所 有 属性 后 ， 就 能 使 其 成 为 汽车 对 象 。 
如 果 不 小 心 在 对 象 中 遗漏 了 属性 mileage， 它 还 是 汽 
车 对 象 吗 ? 

这 些 都 是 前 述 代码 存在 的 问题 ， 我 们 将 在 稍 后 的 一 鞋 
中 处 理 这 些 问 题 ， 届 时 将 讨论 一 些 在 对 象 中 受 善 重用 
代码 的 技巧 。 





理解 对 象 






我 还 想 知 道 ， 如 果 有 人 给 了 我 一 个 对 象 ， 
有 办 法 知道 它 都 包含 哪些 属性 咀 ? 





办 法 之 一 是 迭代 这 个 对 象 的 属性 。 为 此 ， 可 使 用 还 未 介 
绍 过 的 一 种 迭代 方式 for in， 这 种 迭代 器 以 随机 方式 遍 
历 对 象 的 所 有 属性 。 下 面 演示 了 如 何 显示 对 象 chevy 的 
所 有 属性 。 


forin 以 每 次 一 个 的 方式 遍历 对 象 的 属 
人 。 性， 并 依次 将 每 个 属性 赋 给 变量 prop。 


for (var prop in chevy) { 


console.log(prop + ": " + chevy[prop]); 


| / 
py/) 


PON 





JavaScript 控 制 台 
这 指出 了 另外 一 点 : 还 有 一 种 访问 属性 的 方式 。 刚 才 访 问 对 象 chevy 的 属性 ”计时 吓 | Ch 
时 ， 我 们 使 用 了 另 一 种 语法 ， 你 注意 到 了 吗 ?” 实 际 上 , 访问 对 人 象 的 属性 时 ， model: Bel Air 
有 两 种 方式 可 供 选 择 。 一 种 是 你 已 经 知道 的 句 操 表示 法 : year: 1957 


elo Ro} ok f=Ye | 


et- Te (3 of 
convertible: false 
mileage: 1021 


chevy.color 使 用 对 象 名 、 和 句点 和 属性 名 。 





另外 一 种 方式 是 方 括 号 表示 法 ， 类 似 于 下 面 这 样 : 


公使 用 对 象 名 以 及 用 引号 和 方 括号 括 起 的 属性 名 。 与 访问 数组 元 素 的 
chevy["color"] 人 方式 有 点 像 。 











你 需要 知道 的 是 ， 这 两 种 方式 是 等 价 的 ， 功 能 相同 。 唯 一 的 差别 在 于 ， 在 有 些 情况 下 ， 方 括号 表示 法 更 灵活 
些 ， 因 为 可 以 像 下 面 这 样 使 用 表达 式 来 指定 属性 名 : 


和 一 一 可 将 任何 表达 式 放 在 方 括号 内 ， 只 要 
chevy["co" + "lor"] 其 结果 为 表示 属性 名 的 字符 串 即 可 。 
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行为 和 状态 


p sd 

行为 如 何 影响 状态 

给 什 加 殉 油 

对 象 包含 状态 和 行为 。 对 象 的 属性 让 你 能 够 记录 对 象 的 状态 ， 如 袖 位 、 当 前 温度 
或 收音 机 当前 播放 的 歌曲 。 对 和 象 的 方法 让 你 能 够 实现 行为 ， 如 发 动 汽 车 、 加 热 或 
快 进 。 状 态 和 行为 会 相互 影响 ， 你 注意 到 了 吗 ?” 例如 ， 设 有 油 就 无 法 发 动 汽车 ， 
而 开车 时 油 量 会 逐渐 减少 。 有 点 像 现 实生 活 ， 不 是 吗 ? 


下 面 来 进一步 实现 这 种 概念 ， 给 车 加 点 油 ， 然 后 就 可 以 添加 有 趣 的 行为 了 。 要 
给 车 加 油 ， 需 要 添加 新 属性 fuel 和 新 方法 addFuel。 方 法 addFuel 有 一 个 形 参 
amount， 我 们 使 用 它 来 增加 属性 fuel 存 储 的 油 量 。 下 面 来 给 对 象 fiat 添 加 这 些 
属性 : 








var fiat = { 





make: "Fiat", 
model: "500", 
// 其 他 属性 。 为 市 省 篇 幅 ， 省 略 了 它们 


0 我 们 添加 了 新 属性 fuel， 用 于 存储 汽车 的 汕 
fuel: 0, Pi 量 。 一 开始 ， 这 辆 汽车 的 冲 箱 是 空 的 。 


start: function() { 
this.started = true; 
}, 
stop: function() { 
this.started = false; 
}, 
drive: function() { 
if (this.started) 1 
alert(this.make + " " + this.model + " goes zoom zoom!"); 
} else { 


alert("You need to start the engine first."); 


广 人 人 我 们 还 添加 了 方法 addFuel， 用 于 给 
汽车 加 过 。 想 加 多 少 就 可 以 加 多 少 ， 
addFuel: function(amount) { 只 需 在 调用 这 个 方法 时 指定 即 可 。 


this.fuel = this.fuel + amount: 


} ~ 人 | 个 


|， 别 息 了 ，fuel 是 一 个 属性 ， 而 amount 是 一 个 函数 形 参 ， 
四 此 需要 使 用 关键 字 this。 因此 不 需要 使 用 关键 字 this。 





让 状态 来 影响 行为 


添加 属性 fuel 后 ， 就 可 实现 一 些 有 趣 的 行为 了 。 例 如 ， 如 来 没 油 ， 车 就 开 不 动 ! 下 面 
首先 来 调整 方法 drive， 在 其 中 检查 油 量 以 确定 油箱 不 古 空 的 ， 并 在 每 次 开动 时 都 将 
fuel 减 1。 实 现 这 些 行为 的 代码 如 下 : 


var fiat = { 


// 其 他 属性 和 方法 _ 
现在 可 以 在 开动 汽车 前 进行 检查 ， 确 认 光 


drive: function() { 动 洛 车 
if (this.started) { a 箱 不 是 空 的 。 ee 
if (this.fuel > 0) { 就 应 在 每 次 开动 时 邵 筷 分 不 


alert(this.make + " "+ 
this.model + " goes zoom zoom!"); 
this.fuel = this.fuel - 1; 
} else { 
alert("Uh oh, out of fuel."); 


之 一 一、 如果 没 油 了 ， 就 现实 一 条 消 息 
this.stop(); er 


并 爆 灭 发 动机 。 雪 再 次 开动 汽 
} 车 ， 你 人 必须 加 油 并 启动 发 动机 。 
} else { 


alert("You need to start the engine first."); 


}, 
addFuel: function(amount) { 


this.fuel = this.fuel + amount.; 


| 





a 1 人 The page at localhost says: 
Pp 忌 由 (六 便 1 式 客 人 Uh oh, out of fuel. 
请 修改 你 的 代码 ， 并 尝试 运行 它们 ! 这 是 我 们 使 用 下 
面 的 训 试 人 公 得 到 的 结果 : | 人 The page at localhost says: 


Fiat 500 goes zoom zooml 


fiat.start(); 
fiat.drive(); 


首先 ， 我 们 崇 试 在 没 锭 的 情况 下 


fiat.addFuel (2); 开动 汽车 ; 然后 ， 我 们 加 了 所 - A © pt 
fiat.start(); 再 不 断 地 开 ， 直到 油耗 尽 ! 请 宇 

fiat.drive(); 试 添 加 目 己 的 测试 代码 ， 并 确保 

fiat.drive(); 它们 像 你 预期 的 那样 工作 。 | 人 1 says: 
fiat.drive(); 





fiat.stop(); 











理解 对 和 象 


完整 实现 fuel 的 练习 





要 在 汽车 对 象 中 完整 地 实现 属性 fuel1， 还 有 一 些 工 作 要 做 。 例 如 ， 没 油 时 能 够 启动 
发 动机 吗 ?” 请 看 方法 start 的 代码 : 


start: function() { 


this.started = true; 


} 


显然 是 可 以 的 。 
请 完善 这 个 方法 ， 在 其 中 检查 油 位 ， 并 在 没 油 时 使 用 简单 的 提示 (如 The car is 
on empty, fill up before starting!) 告知 驾驶 员 。 在 下 面 重 写 方法 start， 


从 安 


将 其 加 入 你 的 代码 中 ， 并 进行 测试 。 继 续 往 下 阅读 前 ， 请 查看 本 章 末 尾 的 答案 。 


ge 


请 查看 对 象 Eiat 的 代码 ， 你 还 能 在 其 他 地 方 根据 属性 fuel 来 调整 汽车 的 行为 或 创 
建 修改 属性 fuel 的 行为 吗 ? 将 你 的 想法 记录 在 下 面 。 


理解 对 象 


有 了 对 象 ， 未 来 一 片 光明 ， 
光明 得 必须 戴 上 墨镜 。 





各 

祝 锅 你 熟悉 了 对 象 

你 完成 了 有 关 对 象 的 第 一 草 ， 可 以 继续 前 行 了 。 还 记得 你 刚 接触 JavaScript 时 
的 情形 吗 ? 你 眼 里 的 编程 领域 就 是 数字 、 字 符 串 、 语 名 、 和 条件 、for 循 环 等 。 
现在 大 不 相同 了 ， 你 从 更 高 的 层次 思考 问题 ， 眼 里 看 到 的 是 对 象 和 方法 。 看 
看 下 面 的 代码 就 明白 了 : 








fiat.addFuel (2); 
fiat.start(); 
fiat.drive(); 
fiat.stop(); 


这 些 代 码 很 容易 理解 ， 因 为 它 使 用 包含 状态 和 行为 的 对 象 来 摘 绘 世界 。 


这 仪 仅 古 开始 ， 你 可 以 走 得 更 还 ， 也 确实 会 走 得 更 还 。 熟 悉 对 象 后 ， 接 下 来 
我 们 将 继续 提高 你 的 技能 ， 让 你 能 够 使 用 其 他 的 JavaScript 特 性 编写 出 真正 的 
面 癌 对 象 代码 ， 并 遵循 众多 至 关 重 要 的 最 佳 实践 。 


结束 本 章 前 ， 还 有 一 点 你 必须 知道 。 
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更 多 对 象 


对 象 元 处 不 在 

am 对 < 
(它们 让 你 的 生活 更 美好 ) 
对 对 象 略 知 一 二 后 ， 通 同一 个 全 新 世界 的 大 门 就 癌 你 打开 了 ， 因 为 JavaScript 提 供 了 很 多 对 象 
(用 于 执行 数学 计算 的 对 象 、 用 于 操作 字符 串 的 对 象 、 用 于 创建 日 期 和 时 间 的 对 象 ， 等 等 ) ， 
你 可 在 代码 中 使 用 它们 。JavaScript 还 提供 了 一 些 编写 浏览 絮 代 码 时 需要 的 重要 对 象 ， 下 一 章 
将 介绍 其 中 的 一 个 。 现 在 论点 时 间 来 熟悉 一 些 这 样 的 对 象 ， 本 书后 面 将 经 第 用 到 它们 。 








使 用 Date 对 象 来 
操作 日 期 和 时 间 。 
1 > KK < 生 
水 已 经 知道 如 何 使 用 Math 对 象 来 
、 它 还 有 很 多 其 他 的 功能 |! 








Vate Math 
刀 、、JSON 让 你 能 够 与 其 他 应 用 
程序 交换 JavaScript 对 人 象 。 
z rip 
这 个 对 象 让 你 
能 够 在 字符 中 
中 查找 模式 ， RegExp JSON 


4 


这 些 对 象 都 是 Java5cript 
提供 的 。 


这 些 对 象 都 是 浏览 器 提供 的 ， 它 们 
是 基于 浏览 器 的 应 用 程序 的 核心 。 


下 一 章 将 使 用 Document 
对 象 ， 它 让 你 能 够 使 用 
代码 写 入 到 网 页 > 


O 








Wocuwent Window 。 Window 对 象 包 合 _ 
些 与 浏览 器 相关 的 
重要 属性 和 方法 ， 
你 可 在 代码 中 使 用 
尔 一 直 在 使 用 Console 有 一 它们 ， 





对 象 的 log 方 法 在 控制 
台中 显示 消息 。 Rone ol 
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理解 对 象 


4 
起 底 对 象 
本 周 访 谈 : 
且 看 对 象 自己 怎么 说 
Head First: 欢迎 对 象 ， 这 一 章 非 常 精彩 。 从 对 象 的 角 “对 象 : 它们 确实 差不多 是 相同 类 型 的 ， 但 这 是 因为 用 


度 考 虑 代码 ， 真 是 让 人 醒 醋 灌顶 。 

对 象 : 哦 ， 是 吗 ? 一 切 才 刚刚 开始 。 

Head First， 何 出 此 言 ? 

对 象 : 对 象 是 一 组 属性 ， 是 吧 ? 有 些 属性 用 于 存储 对 
象 的 状态 ， 有 些 实际 上 是 图 数 (准确 地 说 是 方法 ) ， 
赋予 对 象 以 行为 。 

Head First: 这 些 我 都 明白 。 我 实际 上 没有 将 方法 也 视 
为 属性 ， 但 如 果 能 够 将 函数 也 视 为 值 的 话 ， 方 法 也 是 
由 名 称 和 值 组 成 的 。 

对 象 : 可 以 将 图 数 视 为 值 ! 相信 我 ， 你 可 以 。 事 实 
上 上， 你 可 能 没 意 识 到 ， 这 种 想法 很 有 见地 。 先 讲 到 这 
儿 吧 ， 我 猜 你 还 有 很 多 问题 要 问 。 

Head First: 但 是 你 刚才 说 到 …… 

对 象 : 好 吧 ， 你 见 过 很 多 包含 属性 的 对 象 ， 还 创建 了 
很 多 对 象 ， 如 各 种 汽车 。 

Head First: 没 错 。 

对 象 : 但 这 些 对 象 都 太 随 意 。 真 正 的 威力 在 于 ， 你 能 
够 创建 模板 ， 用 于 生成 统一 的 对 象 。 

Head First: 哦 ， 你 是 说 生成 的 对 象 都 是 相同 的 类 型 。 
对 象 : 大 致 是 这 个 意思 。 类 型 是 一 个 有 趣 的 JavaScript 
概念 。 你 将 发 现 ， 当 你 能 够 编写 处 理 相 同类 型 对 象 的 
代码 时 ， 便 能 充分 发 挥 对 象 的 威力 。 例 如 ， 你 可 以 编 
写 处 理 车 辆 的 代 砂 ， 而 无 需 关 心 它们 是 目 行车 、 小 汽 
车 还 是 公交 村。 这 束 是 对 象 的 威力 所 在 。 

Head First. 听 起 来 很 有 意思 。 为 此 ， 我 们 还 需要 知道 
什么 ? 

对 象 : 你 必须 更 深入 地 了 人 解 对 象 ， 还 需要 一 种 创建 相 
同类 型 对 象 的 方法 。 

Head First: 我 们 已 经 这 样 做 了 ， 不 是 吗 ? 所 有 汽车 对 
象 不 都 是 相同 类 型 的 吗 ? 





























来 创建 这 些 汽 车 的 代码 类 似 。 换 句 话 说， 它们 包含 相 
同 的 属性 和 方法 。 

Head First: 没 蚀 ， 事 实 上 ， 我 们 捉 到 过 这 些 对 象 的 很 
多 代码 都 相同 。 从 维护 的 角度 说 ， 这 未 必 是 件 好 事 。 


对 象 : 接 下 来 ， 你 需要 学 习 如 何 使 用 相同 的 代码 创建 
完全 相同 的 对 象 ， 而 且 这 些 代码 只 出 现在 一 个 地 方 。 
这 将 涉及 如 何 设计 面 癌 对 象 的 代码 。 你 已 经 为 此 作 好 
了 充分 准备 ， 因 为 你 已 经 掌握 了 基本 的 对 象 知识 。 


Head First: 听 到 你 这 么 说 ， 读 者 一 定 很 高 兴 。 
对 象 : 但 还 有 一 些 有 关 对 象 的 情况 你 必须 知道 。 
Head First: 是 吗 ? 

对 象 : 你 可 在 代码 中 直接 使 用 很 多 现成 的 对 象 。 


Head First: 真 的 吗 ? 这 我 倒是 没有 注意 到 ， 在 哪里 
呢 ? 


对 象 : 注意 到 了 console.1og 吗 ?” 你 认为 console 和 是 
作 低 。 

Head First: 考虑 到 这 里 讨论 的 是 对 象 ， 我 猪 它 是 一 个 
对 象 。 

对 象 : 你 猿 对 了 。1log 呢 ? 

Head First: 属性 …… 哦 不 ,方法 ? 

对 象 : 你 猿 对 了 。alert 呢 ? 

Head First: 不 知道 。 

对 象 : 它 与 对 象 有 关 ， 虽 们 以 后 再 说 。 

Head First: 关于 对 象 ， 你 真是 让 我 们 大 长 见识 ， 期 望 
你 再 次 接受 采访 。 

对 象 : 一 定 。 

Head First: 大 好 了 1! 咱们 下 次 再 见 。 
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黎 效 破解 


在 试图 统治 地 球 的 过 程 中 ，Evel 博 士 不 小 心 将 包含 操作 密码 的 内 部 网 页 放 到 了 网 
上 。 如 果 能 获得 这 个 密码 ， 我 们 就 能 占据 上 风 。 当 然 ， 发 现 这 个 网 页 被 放 在 网 上 
后 ，Evel 博 士 马 上 就 把 它 删 除了 。 好 在 我 们 的 特工 人 员 将 这 个 网 页 记录 了 下 来 ， 但 
问题 是 他 们 不 懂 HTML 和 JavaScript。 你 能 根据 下 面 的 代码 帮忙 找 出 密码 吗 ? 别 忘 
了 ， 这 关乎 地 球 的 存亡 。 











这 些 代 码 好 像 使 用 了 
document 对 象 。 


提示 框 显示 的 密 
人 


请 将 答案 写 在 下 
面 的 提示 框 中 。 





这 是 HTML 代 码 。 


<Idoctype html> 
<html1 lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>Dr. Evel's Secret Code Page</title> 

</head> 

<body> 
<p id="codel">The eagle is in the</p> 
<p id="code2">The fox is in the</p> 
<p id="code3">snuck into the garden last night.</p> 
<p id="code4">They said it would rain</p> 
<p id="code5">Does the red robin crow at</P> 
<p id="code6">Where can I find Mr.</p> 
<p id="code7">I told the boys to bring tea and</p> 
<p id="code8">Where's my dough? The cake won't</p> 
<p id="code9">My watch stopped at</p> 
<p id="codel0">barking, can't fly without umbrella.</p> 
<p id="codell">The green canary flies at</p> 
<p id="codel2">The oyster owns a fine</p> 
<script src="code.js"></script> 


</body> 在 这 里 链接 到 了 上 面 的 
人 De JavaScript 代 码 。 
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DD 
解 究 码 。 


QA 


对 象 是 一 系列 属性 。 


要 访问 属性 ， 可 使 用 句点 表示 法 : 包 
含 对 象 的 变量 名 称 、 句 点 和 属性 名 。 


可 随时 给 对 象 添 加 属性 ， 为 此 只 需 给 
要 添加 的 属性 赋值 。 
你 还 可 删除 对 象 的 属性 ， 为 此 可 使 用 


一 AS 人 全 


delete 运 算 付 。 


基本 类 型 变量 存储 了 字符 串 、 数 字 或 
布尔 值 等 实际 值 ， 对 象 变量 不 同 ， 它 
存储 的 并 不 是 对 象 本 身 ， 而 是 指向 对 
象 的 引用 。 因 此 对 象 变量 也 被 称 为 引 
用 变量 。 

向 函数 传递 对 象 时 ， 函 数 获 得 的 是 指 
向 该 对 象 的 引用 的 副本 ， 而 不 是 对 象 
本 身 的 副本 。 因 此 ， 如 果 在 函数 中 修 
改 属 性 的 值 ， 修 改 的 将 是 原始 对 象 的 
值 。 


对 和 象 的 属性 可 以 是 函数 。 对 和 象 中 的 函 
数 羽 称 为 方法 。 

使 用 句点 表示 法 来 调用 方法 : 对 象 
名 、 句 点 、 方 法 的 属性 名 和 圆 括号 。 


方法 与 函数 没什么 两 样 ， 
象 中 。 


就 像 可 以 向 常规 函数 传递 实 参 一 样 ， 
也 可 向 方法 传递 实 参 。 


调用 对 和 象 的 方法 时 ， 关 键 字 this 指 辣 
其 方法 航 调用 的 对 象 。 


要 在 对 象 的 方法 中 访问 对 象 的 属性 ， 
必须 使 用 句点 表示 法 ， 但 使 用 关键 字 
this 而 不 是 对 象 名 。 

在 面向 对 象 编程 中 ， 我 们 从 对 象 而 不 
是 过 程 的 角度 思考 问题 。 

对 象 包含 状态 和 行为 。 状 态 可 能 影响 
行为 ， 而 行为 也 可 能 影响 状态 。 

对 象 封装 (隐藏 ， 了 其 状态 和 行为 的 
复杂 性 。 

设计 良好 的 对 象 包含 负责 完成 相关 任 
务 的 方法 ， 让 你 无 需 操 心 与 完成 这 些 
任务 相关 的 细节 。 

除了 自己 创建 的 对 象 外 ，Javascript 也 
提供 了 很 多 内 置 对 象 供 你 使 用 。 本 书 
后 面 将 用 到 很 多 这 样 的 内 置 对 象 。 


只 是 位 于 对 


理解 对 象 


to 果 你 跳 计 了 前 一 页 ， 请 回 过 头 去 砷 
议 对 第 6 章 来 说 至 关 恒 室 。 
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JavaScript 填 字 游戏 





横 回 


2. 方法 赋予 对 象 什么 ? 
6. 方法 109 是 哪个 对 象 的 一 个 属性 ? 


SR ， 而 不 征 闻 规 变 量 。 


10. 访问 对 象 的 属性 时 使 用 的 表示 法 。 


i 
LUD ”一 


.用 于 表示 汽车 对 象 品牌 的 属性 。 





上 一 
人 


. 它们 像 弟 规 函 数 一 样 ， 可 以 有 局 部 变量 和 形 参 。 


. 给 汽车 对 象 加 油 ， 进 而 影响 其 状态 的 方法 。 


JavaScript 迷 学 游戏 


填 字 游戏 对 象 是 什么 样 的 呢 ? 它 有 很 多 线索 属性 ， 可 帮助 
你 明白 要 达成 的 目标 。 


纵 问 

1. 访问 属性 started 时 没有 使 用 哪个 关键 字 ， 导 致 非 
亚 特 无 法 开动 ? 

3. 对 象 引 用 是 以 什么 方式 传递 给 函数 的 ， 就 像 基本 类 
型 变量 一 样 ? 

4. 将 对 和 象 赋 给 变量 时 ， 变 量 存 储 的 古 指 癌 对 象 的 什么 ? 
5. 通 第 将 属性 名 指定 为 一 个 什么 ? 

7. 在 对 象 中 ， 将 属性 的 名 称 和 值 用 什么 分 隔 ? 

9. 在 每 个 属性 值 (最 后 一 个 除外 ) 的 后 面 ， 都 需要 加 
A 

12. 汽车 和 小 狗 对 象 都 可 以 有 行为 和 什么 ? 








理解 对 象 


我 们 要 制作 一 个 表格 ， 在 其 中 列 出 汽车 属性 的 名 称 和 值 。 你 能 帮助 我 
们 完成 这 项 任务 吗 ? 答案 如 下 。 





在 这 里 列 出 属 在 这 里 列 出 属性 的 值 。 
性 的 名 称 。 疝 
山 
make : “Chevy / 
model : “BelAir” ,，, 我 们 在 合适 的 地 方 使 用 了 
字符 串 、 布 尔 值 和 数字 
year : 1957 / 
color “red / 
passengers : 2 / 
convertible  : false / 
你 mileage : 1021 , 
在 其 中 尖 加 休想 间 的 一 了 _accessories : “FuzzyDice” 。 ， 
其 他 属性 。 whitewalls : true 





A 
As 阵 请 利用 新 学 到 的 有 关 this 的 知识 补 全 下 面 的 代码 。 答 案 如 下 。 


var eightBall = { index: 0， 
advice: ["yes", "no'", "maybe'", "not a chance"], 
shake: function() { 
this.index = this.index + 1; 
if (this.index >= this.advice.length) { 


this.index = 0; 


}, 


look: function() { 


return this.advice[lthis.index]; JavaScript 控 制 全 
} 
no 
}; 重复 执行 这 些 代码 多 次 ， 0 
eightBal1.shake(); 尔 补 全 的 代码 进行 测试 。 not a chance 





console.log(leightBall.look()); 


你 现在 的 位 置 ， 219 


练习 答案 





并 非 只 能 使 用 一 个 对 象 。 稍 后 你 将 看 到 ， 对 象 的 真正 威力 在 于 ， 你 可 以 创建 大 量 的 


毕 习 对 象 ， 并 编写 代码 来 操作 提供 给 它 的 对 象 。 来 练 练 手 ， 从 头 开始 创建 另 一 个 汽车 对 
答案 象 ， 并 将 其 代码 写 在 下 面 。 答 案 如 下 。 
Va cad1i = { 


make: "GM", 
model: "Cadillac", 
year: 1955, 


color: "tan'", < 


passengers: 5, 在 这 里 定义 对 
. 象 的 属性 。 
convertible: false, 
mileage: 12892 
}; 
车 身 为 棕 褐 色 。 


这 是 一 辆 通用 1955 年 
产 的 凯迪 拉克 。 





它 不 是 敬 答 车 ， 最 多 可 
乘坐 5 人 (后 排 是 一 个 
超大 的 叫 背 座 椅 ) 。 


理解 对 象 


- wo < 人 di 

对 季 冰 和 菠 贴 省 案 

请 利用 你 的 对 象 创建 和 句点 表示 法 技能 ， 使 用 冰箱 贴 将 下 面 的 代码 
补 人 全。 请 注意 ， 其 中 有 些 冰 箱 贴 可 能 是 多 余 的 ! 答案 如 下 。 





"Fido" 


reight: 20.2 


小 狗 对 象 


bark 








( 


Fido 渴 望 你 将 


其 属性 归 位 。 





上 


var Dark， 


if (| dog.weight > 20) { 


bark = "WOOF WOOF"; 
} else { 
bark = "woof woof"; 


} 


var speak ~[ aog.nane BE " says " +| dog.bark Bl' when he wants to "+ dog.activity @B. 


console.log(speak); 


你 现在 的 位 置 ， 221 


练习 答案 








var cadi = { 
make: "GM", 
model: "Cadillac", 
year: 1955, 
color: "tan", 
passengers: 5, 
convertible: false, 
mileage: 12892 


这 


prequal(cadi); 


false 


在 这 里 填写 
削 数 prequal 
退回 的 值 。 


pr or ~, 
222 串 5 和 章 
7 一 一 





轮 到 你 了 。 这 里 还 有 三 个 汽车 对 象 ， 将 它们 分 别传 递 给 函数 Prequal 
时 ， 结 果 如 何 呢 ? 请 先 通 过 心算 来 回答 ， 再 编写 代码 来 检查 你 的 答案 


是 售 正 确 。 答 案 如 下 。 





var fiat = { 
make: "Fiat", 
model: "500", 
year: 1957, 
color: "Medium Blue", 
passengers: 2, 
convertible: false, 
mileage: 88000 


}> 


prequal (fiat); 


false 


“i 





var chevy = { 


上 


make: "Chevy", 
model: "Bel Air", 
year: 1957, 

Color: "red", 
passengers: 2, 
convertible: false, 
mileage: 1021 


prequal(chevy); 


true 


理解 对 和 象 


pp 
时 阵 

AAA An 

合 芭 

有 人 给 你 提供 了 一 个 绝密 文件 ， 还 有 两 个 让 你 能 够 获取 和 设置 该 文件 内 容 的 函数 ， 但 
要 使 用 这 两 个 函数 ， 你 必须 知道 正确 的 密码 。 第 一 个 函数 是 getSecret， 它 在 密码 
正确 时 返回 文件 的 内 容 ， 并 将 每 次 访问 尝试 都 记录 在 案 。 第 二 个 函数 是 setSecret， 
它 修 改 文件 的 内 容 ， 并 将 访问 次 数 重 置 为 零 。 你 的 任务 是 补 全 下 面 的 JavaScript 代 码 ， 
并 对 完成 后 的 函数 进行 测试 。 


ft 





function getSecret(file, secretPassword) { 多 、 
癌 函 数 getS5ecret 传 递 了 对 象 


file .opened = file .opened + 1; 
0 P TT P 和 superSecrettile, 该 对 象 被 赋 
(Secrethassworgd == Mile password) ( gw 全 Wl6。 站 芷 使 用 有 启 
return file .contents; 表示 法 访问 该 对 象 的 属性 (如 
} opened 和 password) 时 ， 必 须 
a 将 对 象 名 指定 为 file。 


return "InvalLid password! No secret for You.' 


} 


function setSecret(file, secretPassword, secret) { 


if (secretPassword == file .password) { 二 一 道理 与 前 面 一 样 。 
file .OPened = 0; 
file .Contents = secret; 
} 
} 
var superSecretrFile = { 


level: "classified", 
opened: 0, 
password: 2, 
contents: "Dr. Evel's next meeting is In Detroit." 
}; 4 一 一 可 将 对 象 superSecretFile 传 递 给 
var secret = getSecret( 5uperSecretFile， 2 ); 函数 getSecret 和 setSecret。 
TT A 


console.log(secret); 


setSecret( 5uperSecretFile 2 / "Dr. Evel's next meeting is In Philadelphia."); 


secret = getSecret( superSecretftile > 2 ) 


console.log(secret); 














练习 答案 


pr 9 (os ORO E 
gp 芝 身 浏览 问答 案 
二 (全 
省 下 面 的 JavaSceript 代 码 存 在 一 些 错 
误 ， 你 的 任务 是 变 身 浏览 器 ， 将 这 
些 错 误 找 出 来 。 答 案 如 






var Song = { 
name: "Walk This Way", 
artist: "Run-D.M.C.", 
minutes: 4, 
seconds: 3, 
genre: "80s", 


playing: false, 


play: function() { , 
这 里 少 了 关键 字 this。 
if (Ithis.playing) { 


this .Playing 三 true; 这 时 少 3 属 性 名 playing o 


console.log("Playing " 
+ this.name + " by " + this.artist); 


} 人 ”访问 这 两 个 属性 时 ， 都 


}, 需 受 使 用 关键 字 this。 


Pause: function() { 


if (Ehis.playing) { 访问 属性 playing 时 ， 也 需要 使 用 关键 字 this。 


this.playing = false; 


this song.play(); 在 方法 外 面 引用 对 象 时 ， 不 使 用 
pb 亦 旦 
this song.Pause():; 关键 字 this， 而 使 用 其 变量 名 。 


理解 对 象 


该 把 整个 车 队 拉 出 来 “ 痪 半 ”了 。 给 每 个 汽车 对 象 都 添加 方法 arive， 然 后 添加 对 它 
们 进行 改动、 驾驶 和 熄火 的 代码 。 管 案 如 下 。 








var cadi = { Ry var taxi = { 





make: "GM", make: "Webville Motors", 
model: "Cadillac", model: "Taxi", 
year: 1955, year: 1955, 
color: "tan", color: "yellow", 
passengers: 5, passengers: 4, 
convertible: false, convertible: false, 务必 在 添加 的 
mileage: 12892, mileage: 281341, 每 个 属性 后 面 
started: false, started: false, 2 
start: function() { start: function() { 加 上 去 So 
this.started = true; this.started = true; 
}, }, 
stop: function() { stop: function() { 
this.started = false; this.started = false; 
}, }, 
drive: function() { drive: function() { 
If (this.started) { if (this.started) { 
alert(this.make + " "+ alert(this.make + " "+ 
this.model + " goes zoom zoom!"); this.model + " goes zoom zoom!"); 
} else { } else { 
alert("You need to start the engine first."); alert("You need to start the engine first."); 
} } 
} } 
}; = }; 
var chevy = { 
make: "Chevy", cadi.start(); 人 一 我 们 将 代码 复制 并 粘贴 
model: "Bel Air", cadi.drive(); 到 每 个 对 象 中 ， 让 每 个 
year: 1957, cadi.stop(); 汽车 对 象 都 有 相同 的 属 
Color: "red", 、 
passengers: 2, chevy.start(); 性 和 方法 9 
convertible: false, chevy.drive(); 人 
mileage: 1021, chevy.stop () ; 现在 可 以 使 用 相同 的 
as WAT 方法 名 对 每 个 汽车 对 
start: function { taxi.start(); A 2 UA = 下 
this.started = true; taxi.drive(); 象 进 人 发 动 ” a 驶 和 
] taxi.stop(); 炸 火 了 。 


stop: function() { 
this.started = false; 
}, 
drive: function() { 
if (this.started) { 
alert(this.make + " "+ 
this.model + " goes zoom zoom!"); 
} else { 
alert("You need to start the engine first."); 


} 


} 














练习 答案 


要 在 汽车 对 象 中 完整 地 实现 属性 fueLI， 还 有 一 些 工 作 要 做 。 例 如 ， 没 油 时 能 够 局 动 
发 动机 吗 ? 请 完善 方法 start， 在 其 中 检查 油 位 ， 并 在 没 油 时 使 用 简单 的 提示 (如 
The car is on Empty fill up before starting!t) 种 庆 罗 驴 员 。 和 在 下 面 
重 与 方法 start， 将 其 加 入 你 的 代码 中 ， 并 进行 测试 。 继 续 往 下 阅读 前 ， 请 查看 本 
章 末 尾 的 答案 。 答 案 如 下 。 





var fiat = { 
make: "Fiat", The page at localhost says: 
model: "500", 人 The car is on empty, fill up before startingl 
year: 1957, 





color: "Medium Blue", 
passengers: 2, ee 
convertible: false, 

mileage: 88000, 

fuel: 0, 

started: false, 


start: function() { 


If (this.fuel == 0) { 
alert("The car is on empty, fill up before starting!"); 
} else { 


this.started = true; 
} 
}> 


stop: function() { 
this.started = false; 
}, 
drive: function() { 
if (this.started) { 
If (this.fuel > 0) { 
alert(this.make + " "+ 
this.model + " goes zoom zoom!"); 
this.fuel = this.fuel - 1; 
} else { 
alert("Uh oh, out of fuel."); 
this.stop(); 
} 
} else { 
alert("You need to start the engine first."); 
} 
}, 
addFuel: function(amount) { 
this.fuel = this.fuel + amount; 
} 
}; 
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理解 对 象 


JavaScript 烧 学 游戏 管 案 


填 字 游戏 对 象 是 什么 样 的 呢 ? 它 有 很 多 线索 属性 ， 可 帮助 你 
明白 要 达成 的 目标 。 


oS 
nm | 
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0 与 网 页 


帅哥 ， 打 住 。 要 想 了 稻 
我 ， 你 得 熟悉 我 的 文档 对 象 


你 的 JavaScript 水 平 有 了 很 大 的 提高 。 事 实 上 ， 你 从 门外汉 成 了 
脚本 编写 人 员 ， 又 成 了 程序 员 ， 但 还 有 一 些 东西 没 学 。 要 充分 利用 你 的 
JavaScript 技 能 ， 就 必须 知道 如 何 与 代码 所 属 的 网 页 交互 。 只 有 这 样 ， 你 
才能 编写 出 动态 网 页 : 能 够 对 用 户 操 作 作 出 啊 应 的 网 页 ， 能 够 在 加 载 后 
自动 更 新 的 网 页 。 那 么 ， 如 何 与 网 页 交互 呢 ? 使 用 DOM， 即 文档 对 象 模 
型 (document object model) 。 本 章 将 详细 介绍 DOM， 看 看 如 何 使 用 它 和 
JavaScript 赋 了 予 网 页 新 功能 。 





回顾 密码 破解 难题 


上 一 章 的 密码 破解 难题 


在 上 一 和 草 的 密码 破解 难题 中 ， 提 供 了 如 下 HTML 和 位 于 外 部 文件 中 的 
JavaScript 代 码 ， 这 些 代码 是 从 Evel 博 士 的 网 站 抓 取 的 : 





这 是 HTML。 
<Idoctype html> 


<html lang="en"> | 
<head> 
<meta charset="utf-8"> 
<title>Dr. Evel's Secret Code Page</title> 


</head> 注意 到 给 每 个 段落 都 
ee ee 指定 了 一 个 id。 
<p id="codel">The eagle is in the</p> 
<p id="code2">The fox is in the</p> 
<p id="code3">snuck into the garden last night.</p> 
<p id="code4">They said it would rain</p> 
<p id="code5">Does the red robin crow at</p> 
<p id="code6">Where can I find Mr.</p> 
<p id="code7">I told the boys to bring tea and</p> 
<p id="code8">Where's my dough? The cake won't</p> 
<p id="code9">My watch stopped at</P> 
<p id="codel0">barking, can't fly without umbrella.</p> 
<p id="codell">The green canary flies at</p> 
<p id="codel2">The oyster owns a fine</p> 
<script src="code.js"></script> 人 这 是 JavaScript 
</body> 代码 。 
</html> | 


document 是 一 个 全 局 对 象 。 Var dCCess 三 


"document.getElementById("code9"); 


getElementByld 是 一 个 广 流 。 


Var Code = access.innerHTML,; 
一 呈 ) 人 
、 Id 的 大 小 写 必 
0 上 冶 不 能 正确 Code = code + " midnignht"; 
须 正确 无 误 ， 和 否则 代码 将 不 能 
运行 。 alert(code); 


你 需要 利用 你 的 推理 能 力 ， 根 据 这 些 代码 破解 出 Evel 博 士 的 密码 。 











这 里 使 用 了 句点 表 
示 法 ， 因 此 access 
可 能 是 一 个 包含 
属性 innerHTML 的 
对 象 。 


与 网 页 交互 


这 些 代码 是 做 什么 的 呢 本 章 将 全 面 人 





绍 document 和 
下 面 来 详细 解读 这 些 代码 ， 搞 清楚 Evel 博 士 是 如 何 生成 密码 的 。 对 每 个 步骤 进行 解读 后 ， element 对 象 。 
你 将 逐 源 明白 其 中 的 工作 原理 。 
G1) 上 和 述 JavaSeript 代 码 首先 调转 对 象 document 的 方法 getELementById， 许 糙 "code9" 传递 
给 它 ， 再 将 结果 贼 给 变量 access。 这 个 方法 返回 的 是 一 个 element 对 象 。 
获取 id 为 “code9 的 元 
var access = 表 ， 即 下 面议 样 的 元 素 。 
document.getElementById("code9"); 
Var code = access.innerHTML; 1， 
code = code + " midnight"; 
<p id="code9">My watch stopped at</P> 
alert(code); a 
接 下 来 ， 我 们 使 用 属 性 innerHTML 获 取 和 这 个 元 素 〈 即 id 为 "code9" 的 元 素 ) 的 内 容 ， 
并 将 其 贼 给 变量 code。 
var access = e 个 县 落 
”的 元 专 定 一 人 小段 族 
document.getElementById("code9"); id 为 code3 的 元 过 ) 
元 素 ， 其 内 容 ( 即 属性 innerHTML 
Var code = access.innerHTML; < 为 文本 My watch stopped 和 
code = code + " midnight"; 
alert(code); 
(9) 在 code 包 含 的 字符 串 ( 即 "My watch stopped at") 末尾 添加 字符 串 "midnight'"。 
然后 创建 一 个 提示 框 ， 在 其 中 显示 包含 在 变量 code 中 的 密码 。 
var access = 
document.getElementById("code9"); The 
page at lo : 
var code = access.innerHTML; we ca host says: 
My watch stopped at midnight 
code = code + " midnight"; 
alert(code); 
| ok ] 


作 在 “My watch stoppedat 末 尾 加 
上 “midnight”， 得 到 密码 “Mywatch 
stopped at midnight” ， 再 弹出 一 个 提示 
框 来 显示 这 个 密码 。 














密码 破解 原理 


hh a 
刚才 我 们 都 做 了 什么 呢 ? 我 人 

? 我 们 使 用 了 一 些 a 
(也 叫 yy WE 些 JavaScript 代 全 ， 1 
(文档 ) ， 折 下 一 个 元 素 reode9" 的 元 素 ) ， ae 
ee opped at") ， 在 未 尾 加 上 "miqnight"， 再 将 其 容 (My 
显示 出 来 。 ght"， 再 将 结果 作为 密码 


国 于 o 和 生 的 网 页 包 合 各 种 候 逸 密码 每 个 
都 放 在 一 个 用 HTML id 标识 的 段落 中 





Co JavaScript 代 码 抓 取 id 为 
SN ; 'code9" 的 元 素 
<p id="code9">M 元 条 。 
The eagle is in the i 


The fox is Lr tie 
ght. 


snuck into the garden last ni 


They said it would rain 


Does the red robin Crow at 


where can I find Mr. 
1 told the boys to bring tea and 


Where's my dough? The cake won't 





My watch stopped at 


barking, can't fly without umbrella. 


The green canary flies at 


The oyster owns a fine 


My watch stopped at" + " midnight" 
(@) 获取 这 个 元 素 的 内 容 ， 在 末尾 
加 上 "miaqnignt"， 并 在 一 个 
提示 框 中 显示 结 琳 。 


My 
Ww 
atch stopped at midnight 





EE 





浏览 器 


OK 


现在 ， 我 们 的 JavaScri 

ipt 技 能 超过 了 Evel 博 

这 里 要 说 的 重点 是 了 Evel 博 士 ， 但 原 他 的 安全 措施 天 衣 无 

OT re 

构 。 为 此 te te ap ， es 
9 J 由 EH 3 3 本 4 日 ， 3 或 结 

同 工 作 的 。 去 更 深入 地 了 解 JavaScript 和 HTML 是 如 何 协 
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JavagSceript 如 何 与 网 页 交互 


JavaScript 和 HTML 是 两 样 不 同 的 东西 : HIML 是 标记 ， 而 JavaScript 是 代码 。 它 们 
如 何 交 互 呢 ? 这 是 通过 网 页 的 表示 ， 即 文档 对 象 模型 (DOM) 实现 的 。DOM 是 
怎么 来 的 呢 ?” 它 是 麟 贤 絮 在 加 载 网 页 时 创建 的 。 创 建 过 程 如 下 。 


Nv 


G1) 你 在 训 览 侣 中 加 载 网 页 时 ， 剖 览 谷 不 
仅 对 HIML 进 行 分 析 并 将 其 泻 染 到 显 
示 釉 ， 还 创建 一 系列 表示 标记 的 对 象 。 


这 些 对 象 存储 在 DOM 中 。 
浏览 器 
我 们 称 之 为 广 
档 对 象 模型 …… 
六 html | 








Ch kecream 
所 CQ 省 站 localhost/-B8eth/HFIS/chap' 





Icecream Flavors 


49 flavors 


All your favorite flavors! 





简称 为 DOM 





\ 


JavaScript 代 人 码 可 通过 与 DOM 交 互 来 





(3) JavaScript 代 码 修改 


访问 元 素 及 其 内 容 ， 还 可 使 用 DOM 代码 人 

来 创建 或 删除 元 素 。 JS DOM 时 ， 浏 览 器 将 
动态 地 更 新 网 页 ， 让 
用 户 能 够 在 网 页 中 看 
到 新 内 容 。 


制作 DO M 


如 何 自 己 动手 制作 VOM 


虽 们 来 使 用 一 些 标 记 来 制作 DOM。 下 面 古 一 个 制作 DOM 的 入 


单 食谱 。 


机 Eee 


一 个 设计 良好 的 HTML5 网 页 









<!doctype htm1> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>My blog</title> 
<script src="blog.js"></script> 

</head> 

<body> 

<hl>My blog</h1> 

<div id="entry1"> | 
<h2>Great day bird watching</h2> | 
<p> 


Today I saw three ducks! 











一 个 准备 就 绪 的 现代 Web 浏 贤 器 







做 法 
1. 首先 ， 创 建 一 个 document 节 点 ， 






I named them 






Huey, Louie, and Dewey:. 
</p> 
<p> 








I took a Couple of photos... 







</p> 
和 9] 页 级 元 这 里 是 <htm1L> </div> 
2. 接 下 来 ,提取 HTML 网 页 的 顶级 元 素 (这 里 是 0 






、 a 
元 素 ) ， 将 其 视 为 当前 元 素 ， 并 作为 document 的 子 节点 
加 入 DOM 中 ， 






</html> 


document 2 





3. 对 于 庶 套 在 当前 元 素 的 每 个 元 素 ， 都 将 其 作为 当前 元 素 
的 子 节 点 加 入 到 DOM 中 ，。 a 


WO0M 做 好 了 ， 详 情 


见 下 一 页 。 





4. 对 于 刚 添 加 的 每 个 元 素 ， 都 重复 第 3 步 ， 直 到 所 有 元 素 
都 加 入 到 了 DOM 中 。 





CAA 


初 尝 VOM 

如 果 你 按 前 面 的 DOM 食 谱 做 ， 最终 将 得 到 一 个 类 似 于 下 面 的 结构 。 每 个 
DOM 顶 部 都 是 一 个 document 对 象 ， 它 下 面 是 一 棵 树 ， 其 中 包含 由 HTML 
标记 中 各 个 元 素 构 成 的 树枝 和 树叶 。 下 面 来 仔细 研究 一 下 。 


2 旺 的 特 

© t， 它 是 树 的 特 、 
顶部 dp 代码 ~ document 就 像 是 这 
珠 部 分 、 六 访问 整个 DOM 棵 倒立 的 树 的 树 根 。 
中 使 用 它 杀 急 中 


My blog My blog 


这 些 就 像 是 树叶 ， 因 为 


它们 只 包含 文本 ， 不 包 
今 ay bir 
售 其 他 元 系 。 watching 


DOM 包 含 网 页 的 内 容 和 元 素 。 虽然 这 时 外 
文本 内 容 ， 但 绘制 DOM 时 ， 我 们 并 不 总 是 这 样 做 。 


有 了 0OM 后 ， 想 怎么 查 


硕 和 修改 它 都 可 以 。 





wj) Cb 


Today I tooka 
I saw couple of 
three... photos... 


列 Wy A 


我 们 将 这 种 结构 比 作 一 棵 树 ， 不 
仅 因为 树 是 计算 机 科学 领域 的 一 
种 数据 结构 ， 还 因为 它 看 起 来 
就 像 一 棵 倒立 的 树 : 最 上 面 是 
树 根 ， 最 下 面 是 树叶 。 





pe 这 些 就 像 是 树枝 。 


\ 
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制作 DOM 的 练习 





次 身 济 寓 器 

你 的 任务 是 误 身 浏览 
器 ， 这 自 对 HTJMY 岂 进行 分 
折 并 和 制作 DO ， 疯 在 和 就 
对 右边 的 HTY 岂 进行 分 
拆 ， 并 在 下 面 给 和 制 DOM 
吧 。 行 头 部 分 已 经 为 你 
绘制 籽 了 。 ] 


请 将 你 绘制 的 DOM 与 本 章 
末尾 的 答 肾 进行 比较 ， 再 
接着 往 下 阅读 。 
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Qn Movies 


Cele/@ nee://ocathost -eth/HTuL Sjavascrpt2/” © Bo Coo i 
Movie Showtimes 





Plan 9 from Outer Space 
Playing at 3:00pm, 7:00pm. Special showing tonight at midnight! 
Forbidden Planet 


Playing at 5:00pm, 9:00pm. 


<Idoctype html> 
<html lang="en"> | 
<head> 
<meta charset="utf-8"> 
<title>Movies</title> 
</head> 
<body> 
<hL>Movie Showtimes</hL> 
<h2 id="moviel">Plan 9 from Outer Space</h2> 
<p>Playing at 3:00pm, 7:00pm. 
<span> 
Special showing tonight at <em>midnight</em>! 
</span> 
</p> 
<h2 id="movie2">Forbidden Planet</h2> 
<p>Playing at 5:00pm, 9:00pm.</p> 
</body> 
</html> 





在 这 里 绘制 你 的 DOM。 





document 





f 








两 种 截然 不 同 的 技术 怎么 能 走 到 一 起 呢 ? 


HTML 和 JavaScript 肯 定 来 自 不 同 的 星球 。 
何 出 此 言 ? HTML 的 DNA 由 声明 式 标记 组 成 ， 
让 你 能 够 描述 一 系列 组 成 网 页 的 赃 枯 元 素 ; 而 
JavaScript 的 DNA 完 全 是 由 算法 遗传 物质 组 成 
的 ， 用 于 对 计算 进行 摘 述 。 

它们 根本 不 是 一 路 人 ， 是 不 是 融 无 法 交流 呢 ? 
当然 不 是 ， 因 为 它们 之 间 有 座 桥 : DOM 。 通 
过 DOM，JavaScript 能 够 与 网 页 交流 ， 反 之 
栗 然 。 交 流 的 途径 有 多 种 ， 这 里 只 介绍 其 中 一 
种 : 它 就 像 一 个 小 小 的 虫 洞 ， 计 JavaScript 
能 够 访问 网 页 中 的 任何 元 素 。 这 个 虫 洞 就 是 
getElementById., 
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使 用 getelementbyid 来 获取 元 素 


先 来 看 一 个 DOM。 这 个 DOM 很 简单 ， 其 中 包含 一 些 HTML 段 落 ， 每 个 段落 都 由 
id 标 识 为 绿色 星球 、 红 色 星 球 或 赣 色 星球 。 另 外 ， 每 个 段落 都 包 售 一 些 文 本 。 当 
然 ， 还 有 一 个 <head> 元 素 ， 但 出 于 简化 考虑 ， 我 们 暂时 不 管 这 些 细节 ， 


document 


pid= “greenplanet™ pid= “redplanet™ pid= “blveplanet™ 


All is Nothing to All systems 
Well report A-OK 


下 面 使 用 JavaScript 来 增加 一 些 趣 味 。 假 设 我 们 要 将 元 素 greenplanet 的 文 
本 All is well 改 为 Red Alert: hit by phaser fire!。 将 来 你 可 能 要 根据 用 户 的 
操作 乃至 来 自 Web 服 务 的 数据 执行 类 似 的 操作 ， 这 些 都 将 在 本 书后 面 介 绍 ， 但 这 
里 直接 修改 元 素 gzeenP1Lanet 的 文本 。 为 此 ， 需 获取 id 为 greenPLanet 的 元 
素 ， 加 下 面 的 代码 所 示 : 


document 表 示 浏 览 跨 显示 的 

整个 网 页 ， 它 包含 完整 的 DOM， 

因此 可 以 请 它 来 完成 查找 id 为 指 在 这 里 ， 我 们 请 document 提 供 一 个 
定 值 的 元 素 等 任务 。 元 素 ， 查 技 id 为 指定 值 的 元 素 。 


、\ 、 


document.getElementById("greenplanet"); 


0 一 > |] JS < 


然后 ， JavaScript 
a 代码 就 可 对 它 
getElementByld( greenplane 久 ) 退 id 行 各 种 有 趣 的 
为 “greenplanet 的 段 治 元 a 人 7s 


getElementById 将 元 素 提 供给 你 后 ， 你 就 可 以 对 其 执行 操作 了 ， 
如 将 其 文本 改 为 Red Alert: hit by 站 fire1。 为 此 ， 通 常 将 这 个 
元 素 岐 给 一 个 变量 ， 以 便 能 够 在 任何 地 方 引 用 它 。 下 面 就 来 这 样 做 ， 并 
对 元 厅 的 文本 进行 修改 : 


调用 getElementByld ， 它 找到 并 返 加 id 
将 元 素 赋 给 变量 planet。 人 为 greenplanet 的 7 元 素 。 
var planet = document.getElementBylId("greenplanet"); 


现在 可 以 在 代码 中 使 用 变量 
planet 来 引用 这 个 元 素 了 。 


Vv 
planet.innerHTML = "Red Alert: hit by phaser fire!"; 
a 7/ 
的 属 导 性 innerHTML 来 oe 我 们 将 元 素 planet 的 
其 内 容 。 内 容 修改 为 新 的 文本 ， 


导致 DOM (和 网 页 ) 
更 新 为 包含 新 的 文本 。 


J 


document 


稍 后 将 更 详细 地 讨 
论 元 素 的 属性 






pid= “greenplanet™ pid= “redplanet™ pid= “blveplanet” 


Red Alert: hit by Nothing to All systems 
phaser frel report A-OK 





对 DOM 所 做 的 任何 修改 都 将 在 浏览 器 膏 染 
得 到 的 网 页 中 反映 出 来 ， eat 
人 其 中 包含 的 是 新 内 容 ! 


你 现在 的 位 置 ， 
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getelementbyid 的 工作 原理 


使 用 getElementById 获 取 元 系 


刚才 我 们 都 做 什么 了 ?下面 更 详细 地 说 明 。 我 们 在 代码 中 使 用 document 对 
象 来 访问 DOM， 这 是 一 个 内 置 对 象 ， 有 许多 属性 和 方法 ， 其 中 包括 我 们 用 
来 从 DOM 中 获取 一 个 元 素 的 getElementById。 方 法 getElementById 接 
受 一 个 id， 并 返回 该 id 指 定 的 元 素 。 在 CSS 中 ， 你 可 能 使 用 过 id 来 选择 元 素 并 
设置 其 样式 ， 但 这 里 使 用 id 从 DOM 中 获取 一 个 元 素 id 和 Ureenplarnet 
<P> 元 系 。 


获得 正确 的 元 素 后 ， 就 可 对 其 进行 修改 了 。 这 些 将 稍 后 介绍 ， 现 在 的 重点 是 
跟踪 这 些 步 骤 ， 以 了 解 getElementById 


的 工作 原理 ， 外) 



















浏览 器 在 此 ， 我 读 取 网 页 许 


0 0 创建 其 00M。 






| 锋 




















rm J 上 . 。 4 € CG 省 | Dlocalhost/~Beth/HFJS/chapt... | »| 三 
艰 踪 步骤 1、2 和 5。 
Green Planet 国友 
All is well NN 
html , 
Red Planet 
head 











bod 
| 
Nothing to report 


Blue Planet 


All systems A-OK 




















pid= “greenplanet” 












pid= “redplanet” | pid= “blveplanet” | 


Nothing to All systems 
report A-OK 





JavaScript 代 码 在 
此 ,我 在 00M 中 查找 id 为 
greenP1Lanet 的 元 素 。 


使 用 document 来 访问 DOM。 


0 
从 var planet = document.getElementById("greenplanet"); 


| 


将 返回 的 元 素 赋 给 变量 
planet， 供 以 后 使 用 。 










调用 getElementByld。 查找 id 为 greenplanet 的 元 素 。 


你 找到 了 我 ! 我 是 id 为 
greenplanet 的 <p> 元 素 。 告 诉 
我 你 要 做 什么 吧 。 



















从 0M 获 取 的 到 底 是 佬 径 


使 用 getElementById 从 DOM 获 取 元 素 时 ， 得 到 的 是 一 个 元 素 对 象 ， 你 可 使 用 它 来 
读 取 、 修 改 或 殖 换 元 素 的 内 容 和 特性 。 神 奇 之 处 在 于 ， 当 你 修改 元 素 时 ， 所 做 的 修 
改 也 将 反映 到 网 页 中 。 


重要 的 事先 办 ， 咱 们 再 来 看 看 刚才 从 DOM 和 获取 的 元 素 对 象 。 我 们 知道 ， 这 个 元 素 对 
象 表示 的 是 网 页 中 id 为 greenplanet 的 <p> 元 素 ， 该 元 素 的 文本 内 容 为 All is well。 
与 其 他 JavaScript 对 象 一 样 ， 元 款 对 象 也 有 属性 和 方法 。 就 元 素 对 象 而 言 ， 我 们 可 以 
使 用 其 属性 和 方法 来 读 取 和 修改 元 素 。 下 面 是 你 可 对 元 素 对 象 执行 的 一 些 操作 。 























获取 内 容 (文本 或 HTML) 。 ee 
修改 内 容 . 
读 取 特 性 。 
添加 特性 。 
修改 特性 。 
删除 特性 。 





对 于 这 个 <p> 元 素 ( 别 忘 了 ， 它 是 id 为 greenplanet 的 <p> 元 素 ) ， 我 们 要 做 的 是 ， 
将 其 内 容 All is well 改 为 Red Alert: hit by phaser fire!。 我 们 已 经 将 这 个 元 素 存 储 到 了 
变量 planet 中 ， 下 面 使 用 这 个 变量 来 修改 该 元 素 的 属性 之 一 一 一 innerHTMIL: 


变量 planet 包 含 一 个 元 素 对 象 一 一 id 为 
8 dreenplanet 的 <p> 元 素 。 


var planet = document.getElementById("greenplanet"); 


planet.innerHTML = "Red Alert: hit by phaser fire!"; 


(二 可 使 用 元 素 对 象 的 属性 innerHTML 来 修 
改元 素 的 内 容 。 
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使 用 innerHTML 


查找 内 部 休 ML 


innerHTML 是 个 重要 的 属性 ， 使 用 它 可 以 读 取 或 替换 元 素 的 内 容 。 如 果 你 
查看 innerHTMLIL 的 值 ， 看 到 的 将 是 包含 在 元 素 中 的 内 容 (元 素 的 HTML 标 
签 除外 ) ，“ 内 部 ”HTML 因 此 而 得 


器 











名 。 咱 们 来 做 个 小 实验 ， 通 过 显示 属 
性 innerHTML， 将 元 素 对 象 Planet 的 内 容 显示 到 控制 台 ， 如 下 所 示 ; 





Var planet = 


document.getElementByIlId("greenplanet"); 
console.log(planet.innerHTML); 


JavaScript 控 制 合 
将 属性 planet.innerHTML 传 说 给 console.log, 了 


从 而 将 其 值 显示 到 控制 全 ee 


一 安放 内 
属性 planet.innerHTML 的 值 无 个 字符 串 ， 在 控 


制 台中 全 多 示 方 式 与 其 他 字符 串 没什么 两 样 。 


All is well 





下 面 来 尝试 修改 属性 jnnerHTML 的 值 。 当 我 们 这 样 做 时 ， 将 修改 网 
页 中 id 为 greenplanet 的 <p> 元 素 的 内 容 ， 因 此 你 将 看 到 网 页 也 发 
生 了 变化 。 


var planet = document.getElementBylId("greenplanet"); 
planet.innerHTML = "Red Alert: hit by phaser fire!"; 
console.log(planet.1innerHTML); 


修改 元 素 的 内 容 : 将 其 属性 inmnerHTML 设 置 avaScript 控 制 台 
为 字符 种 “Red Alert: hit by phaserfirel 


O 





Red ALeLt: hit by 
一 phaser fire! 
盏 次 将 属性 innerHTML 的 值 写 

二 个 localhostl -Beth /HS = 入 控制 台 时 ， 我 们 看 到 的 着 
ee i 新 设置 的 值 。 

Red Alert: hit by phaser fire! < 人、 rn" 有 

Red Planet 站 贝 也 发 生 了 变化 。 

Nothing to TepoT 

Blue Planet 


All systems A-OK 
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快速 是 >» 


请 坐 下 来 休息 一 会 儿 。 你 可 能 自 言 自 语 地 说 : 等 等 ， 我 对 id 和 类 还 有 点 印象 ， 但 
人 ES 别 担心 ， 我 们 来 简单 复习 一 下 ， 
提供 一 点 点 背景 知识 ， 再 重 回 正题 





在 HTML 中 ，id 让 我 们 能 够 唯一 地 标识 元 素 ; 给 元 素 指 定 独一无二 的 id 后 ， 束 
可 在 CSS 中 使 用 id 来 选择 元 素 以 设置 其 样式 。 另 外 ， 正 如 你 已 经 看 到 的 ， 在 
JavaScript 中 ， 可 使 用 id 来 获取 元 素 。 


<div id="menu"> 人 一 ~、 我 们 给 这 1 个 cdiv> 元 素 指定 了 一 个 独 


a 在 整个 网 页 中 ， 
</div> 必须 确保 只 个 元 素 的 id 为 menu。 


指定 id 后 ， 就 可 在 CSS 中 使 用 它 来 选择 元 素 以 设 管 其 样式 了， 如 下 所 示 : 


ee div#menu 选 择 id 为 menu 的 <div> 
ba AL ”元 素 ， 这 让 衣 们 能 够 给 这 个 
0 素 (也 只 有 这 个 元 素 ) 设置 样 
Se 

选择 器 。 background-color: #aaa; 式 。 


} 
在 JavaScript 中 ， 也 可 通过 id 来 访问 这 个 元 素 : 


var myMenu = document.getElementById("menu"); 








2 司 区 


<h3 class="drink">Strawberry Blast</h3> < 一 一 这 两 个 广 <hs> 元 袁 都 属 于 drink 类 。 


类 像 编 组 ， 你 可 以 将 名 个 考 
<h3 class="drink">Lemon Ice</h3> 1 入 到 同一 he 将 多 1 元 素 加 


在 CSS 和 JavaScript 中 ， 都 可 根据 类 来 选择 元 素 ， 稍 后 将 介绍 如 何在 JavaScript 
中 使 用 类 。 顺 便 说 一 句 ， 如 果 你 觉得 这 里 复习 的 内 容 不 够 ， 可 参阅 《Head First 
HTML 与 CSS》 的 第 7 革 ， 也 可 参阅 你 喜欢 的 其 他 HTML 和 CSS 指 南 。 
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修改 DOM 


修改 MUM 的 影响 


使 用 innerHTML 修 改元 素 的 内 容 时 ， 到 底 会 有 什么 样 的 影响 呢 ?” 你 实际 上 古 在 即时 
地 修改 网 页 的 内 容 。 因 此 ， 当 你 修改 DOM 的 内 容 时 ， 网 页 也 将 随 之 发 生变 化 。 


在 B 女 让 使 用 innerHTML 修 改 内容 前 ， 你 
人 ss 看 到 的 网 页 以 及 幕后 的 DOM。 SY 


oo 
@ee | | Planets x 3 












所 CQ 人 省 | 门 localhost/~8eth/HFIS/chapt..、 »| 三 





Green Planet 


( All is well ) 















Red Planet 
NO pid= “greenplanet pid= “redplanet” pid= “blveplanet” | 
Blue Planet All is Nothing to All systems 
wel| report A-OK 
All systems A-OK 
我 们 将 要 修改 这 个 元 素 的 内 容 。 
2 
修改 后 加 
使 用 innerHTML 修 改 内 容 后 ， 你 
看 到 的 网 页 以 及 幕后 的 DOM。 SS 
@ 虽 日 | | Planets x -A er document 
所 CQ 省 | 全 localhost/~Beth/HFJS/chapt... | »| 三 | 





Green Planet 


Red Alert: hit by phaser fire! 








Red Planet 
WO pid= “greenplanet™ pid= “redplanet™ pid= “blveplanet™ 
Blue Planet Red Alert: hit b Nothing to All systems 
7 9 
phaser frel report+ A-OK 
All systems A-OK 


对 DOM 所 做 的 任何 修改 都 将 在 浏览 器 膏 染 得 到 的 网 由 
中 反映 出 来 ， 因 此 你 将 看 到 这 个 段落 发 生 了 变化 ， 包 
含 的 是 新 内 容 | 


世上 没有 
晶 敬 的 问题 


>» 
[5) s 调用 document.getElementById 了 时 ， 
如 果 传 入 的 id 不 存在 ， 结 果 将 如 何 ? 


A 

人 l 根据 id 从 DOM 获 取 元 素 时 ， 如 果 指 定 的 id 
不 存在 ，getElementById 将 返回 null。 调 用 
getElementById 时 ,检查 返回 的 是 否 是 null 是 
个 不 错 的 主意 ,这样 可 确保 只 在 返回 了 一 个 元 素 
时 才 访 问 其 属性 。null 将 在 下 一 章 更 详细 地 介绍 。 


. 8 

[9) se。 也 可 使 用 document.getElementById 
根据 类 来 获取 元 素 吗 ? 例如， 如 果 有 很 多 属于 
Planets 类 的 元 素 ， 是 否 可 以 这 样 做 ? 

AAA ， 

号 ， 不 能 ， 但 你 的 思路 是 对 的 。 调 用 get- 
ElementById 时 ,只 能 传 入 id。 但 有 一 个 名 为 
getElementsByClassName 的 DOM 方 法 ， 可 用 
来 根据 类 名 获取 元 素 。 调 用 这 个 方法 时 ， 返 回 的 
是 一 个 元 素 集 合 ， 其 中 包 揪 属于 指定 类 的 所 有 元 
素 (因为 可 能 有 多 个 元 素 属于 同一 个 类 ) 。 还 有 
一 个 返回 元 素 集 合 的 方法 getElementsBy- 
TagName， 它 返回 与 指定 标签 名 匹配 的 所 有 元 
素 。getElementsByTagName 将 在 稍 后 介绍 ， 届 
时 你 将 明和 白 如 何 处 理 它 返回 的 元 素 集 合 。 





4 

上 oj ; 元素 对 象 到 底 是 什么 呢 ? 

A 四 

吟 ' 。， 问 得 好 。 在 浏览 器 内 部 ， 使 用 元 素 对 
象 来 表示 你 在 HTME 文 件 中 输入 的 内 容 ， 如 
<Pp>sometext</p>。 加 载 并 分 析 HTMEL 文件 
时 ， 浏 览 器 为 网 页 中 的 每 个 元 素 创 建 一 个 元 素 
对 象 ， 并 将 它们 加 入 到 DOM 中 。 因 此 ，DOM 其 
实 就 是 一 棵 由 元 素 对 象 组 成 的 大 树 。 另 外 ， 别 
总 了 ， 与 其 他 对 象 一 样 ， 元 素 对 象 刀 有 属性 (如 
innerHTMIL) 和 方法 ， 本 书后 面 将 介绍 元 素 对 象 
的 其 他 一 些 属性 和 方法 。 


多 

人 o] ; 我 党 得 元 素 对 象 应 包含 一 个 名 为 
content 或 html 的 属性 ， 为 何 将 该 属性 命名 为 
innerHTML 央 ? 


AAA ， 

只 ， 我 也 是 这 么 认为 的 ， 这 个 属性 名 有 点 怪 。 
属性 innerHTMIL 表 示 元 素 包 念 的 所 有 内 容 ， 包 
括 吝 套 的 元 素 (例如 ， 段 落 元 素 除 文本 外 ， 还 可 
能 包含 <em> 和 <img> 元 素 ) 。 换 向 话说 ， 它 表示 
元 素 内 部 的 HTML。 是 不 是 还 有 属性 outerHTML 
呢 ? 有 | 这 个 属性 表示 元 素 内 部 的 HTMEL 以 及 
元 素 本 身 。 实 际 上 ，outerHTMIL 用 得 不 多 ， 但 
ijnnerHTMIL 常 被 用 来 修改 元 素 的 内 容 。 


\S 

[9) . 也 就 是 说 ， 通 过 给 InnerHTMIL 赋 值 ， 可 
蔡 换 任何 元 素 的 内 容 。 是 否 也 可 使 用 innerHTML 
来 修改 <body> 元 素 的 内 容 呢 ? 

A 

只 "你 说 的 没 错 ，innerHTMI 能 够 让 你 方便 地 
替换 元 素 的 内 容 。 你 也 可 以 使 用 它 来 替换 <body> 
元 素 的 内 容 ， 这 将 导致 整个 网 页 被 替换 为 新 内 容 。 








(帮工 站 过 一 山内 (一 -SEE 
你 现在 的 位 四 
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练习 
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隆 笔 上 阵 


KC 






这 个 DOM 中 隐藏 着 一 条 秘密 信息 ， 
请 根据 下 面 的 代码 破译 出 这 条 密 
电 ， 答 案 在 本 页 倒 着 列 出 来 了 。 


document .getElementById("e7") 
document .getElementById("e8") 
document .getElementById("e16") 
document .getElementById("e9") 
document .getElementById("el18") 
document.getElementById("el3") 
document .getElementById("el12") 


“"e11" 


: 
局 


document .getElementById("e2") 





号 下 每 行 代码 选 择 的 元 素 及 其 内 
容 ， 将 秘密 信息 破译 出 来 。 


document 
script 


I+ aint 





Secret Message 


The 





a lot 


Ido 


funny 


Im 





one af a time! 





li id="e18" 
pages 
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国 绕 星球 进行 试 罗 


你 知道 如 何 使 用 aocument .getELlementById 来 访问 元 素 ， 还 知道 如 
何 使 用 innerHTMI 来 修改 元 素 的 内 容 ， 来 真 刀 真 枪 地 尝试 一 下 吧 。 


下 面 是 显示 星球 的 HTML。 除 了 三 个 表示 绿色 星球 、 红 色 星 球 和 蓝 色 
星球 的 段落 外 ， 还 在 <headq> 元 素 中 航 入 了 一 个 用 于 放置 JavaScript 代 
伺 的 <sczript> 元 素 。 请 输入 这 些 HTML 以 修改 DOM 的 JavaScript 代 
码 一 一 如 来 你 还 没有 这 样 做 的 话 : 





<Iidoctype html> 

<html lang="en"> 

<head> 包含 代码 的 
<meta charset="utf-8"> <script> 元 喜 。 
<title>Planets</title> 


<script> 像 前 面 介 绍 的 一 样 ， 获 取 
var planet = document.getElementById("greenplanet"); 2 id 为 greenplanet 的 < p> 元 
planet.innerHTML = "Red Alert: hit by phaser fire!"; | 素 ， 并 修改 其 内 容 。 


</script> 

</head> 

<body> 
<hl>Green PLanet</h1L> 你 要 使 用 JavaScript 
<p id="greenplanet">A]l]l] is well</p> 代码 修改 的 cp> 元 素 。 


<hL>Red Planet</hl1> 
<p id="redplanet">Nothing to report</p> 
<hl>Blue Planet</hl1> 
<p id="blueplanet">A]ll] systems A-OK</p> 
</body> 
</html> 





IY on 


© 3 CO localhost/~Beth/HTML. so 局 兴国 丸和 








输入 这 些 代码 后 ， 在 剖 览 右 中 加 载 这 个 网 页 ， 看 看 绿色 


星球 上 发 生 的 DOM 奇 迹 。 Green Planet 
All is well 
Red Planet 


哎呀 | 出 问题 了 ， 绿 色 旦 


球 显 示 的 还 是 Allis well。 到 Nothing to report 
是 怎么 回 事 呢 ? 
I Blue Planet 
All systems A-OK 
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想 想 代码 为 什么 无 法 工作 





标记 和 和 代码 我 都 检查 了 三 遍 ， 
就 是 不 行 ， 我 没有 看 到 网 页 有 
任何 变化 。 













哦 ， 对 不 起 ， 有 一 点 我 们 志 记 说 了 。 | 
处 理 DOM 时 ， 确 保 代 码 在 网 页 完全 加 载 后 再 执行 至 
天 重要 ;， 否则， 代码 执行 时 ，DOM 很 可 能 还 未 创建 。 


来 看 看 到 搬出 了 什么 回 题 : 我 们 将 代码 放 在 了 网 页 
的 <head> 元 素 中 ， 因 此 它 执行 时 剂 览 器 尚未 读 取 网 
页 的 其 他 部 分 。 这 是 个 大 问题 ， 因 为 此 时 还 没有 id 为 
greenplanet 的 段落 元 素 。 


这 将 导致 什么 样 的 结 末 呢 ? 调用 getElementById 
上 时， 将 返回 null 而 不 是 我 们 希望 的 元 砂 ， 进 而 导致 
基 误 。 但 浏览 器 沉 得 住 气 ， 对 此 置 若 闭 闻 ， 依 然 对 
网 页 进行 演 染 ， 只 是 没有 修改 绿色 星球 的 内 容 。 


如 何 修复 这 种 问题 呢 ? 可 将 代码 移 到 <body> 元 素 的 
末尾 ， 但 有 一 种 更 简单 的 办 法 可 确保 代码 在 正确 的 
时 候 运 行 ， 它 让 阐 砚 开 在 加 载 网 页 并 创建 DOM 后 再 
执行 代码 。 下 面 就 来 看 看 如 何 做 。 














JavaScript 控 制 台 


/一 加 载 该 网 由 时 ， 加 


果 查 看 控制 台 ， 你 
在 大 多 数 浏 览 器 中 
都 将 看 到 错误 滴 奶 。 
控制 台 是 个 很 不 错 
的 调试 工具 。 


Uncaught TypeError: 
Cannot set property 


'innerHTML' 


of null 





网 页 加 载 定 能 前 别 想 和 返 行 代码 


怎么 做 呢 ? 除了 将 代码 移 到 <boqy> 元 素 末 尾 外 ， 还 有 一 种 办 法 ， 那 就 


通过 代码 《有些 人 认为 这 种 办 法 更 为 干净 利落) 。 


是 
具体 做 法 如 下 。 首 先 ， 创 建 一 个 函数 ， 在 其 中 包含 要 在 网 页 加 载 完毕 
后 执行 的 代码 。 然 后 ， 将 这 个 函数 赋 给 对 象 window 的 属性 on1load。 


这 有 何 作用 呢 ?” 对 象 vindow 将 调用 你 赋 给 其 属性 on1oag 的 函数 ,但 
仅 在 网 页 加 载 完毕 后 才 这 这 样 做 。 这 要 感谢 对 象 vindow 的 设计 人 员 ， 是 
让 你 能 够 指定 在 网 页 加 载 完 人 年 后 将 要 执行 





他 们 给 你 提供 了 一 个 途径 ， 
的 代码 。 请 看 下 面 的 示例 : 


首先 ， 创 建 一 个 名 为 init 的 函数 ， 
加入 到 这 个 
<script> 数 中 。 


function init() { 


Var planet = document.getElementById("greenplanet"); 
planet.innerHTML = "Red Alert: hit by phaser fire!"; 


window 是 一 个 JavaScript 内 


置 对 象 ， 表 示 浏 览 器 窗口 。 


dt 但 要 


a 这 是 原来 的 代码 ， 现 


在 放 到 了 逊 数 in 让 中 。 


将 函数 in 直 同 给 属性 window.onload。 千 万 不 要 在 函 


数 名 后 添加 括号 ， 因 为 这 里 不 是 调用 函数 ， 而 只 


window.onload = init; 


</script> 





重新 加 载 改 用 了 国 数 init 和 属性 onloadq 的 网 页 。 这 次 训 览 右 将 
加 载 网 页 、 创 建 完整 的 DOM， 然 后 才 调 用 函数 init。 


这 就 对 了 ， 现 在 绿色 星球 显 
示 了 Red Alert， 与 我 们 希望 
的 一 样 。 


忆 是 将 函数 作为 一 个 值 赋 给 属性 window.onload。 


四 日 日 Planets 


[4 >] | + |@ http://localhost/~Beth/Hear 地 \Qr- Google 肖 愉 








Green Planet 


Red Alert: hit by phaser fire! 


Red Planet 


Nothing to report 


Blue Planet 


All systems A-OK 
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浏览 器 和 事件 处 理 程序 


你 说 “ 事 停 处 理 程序 ”， 我 说 “回调 函数 " 


下 面 来 更 深入 地 研究 一 下 on1oagd 的 工作 原理 ， 因 为 它 使 用 了 一 个 很 常见 的 
JavaScript 编 码 模式 .。 





假设 有 重大 的 事件 (如 网 页 加 载 完 毕 ) 即将 发 生 ， 而 你 必须 在 其 发 生 后 第 一 时 


间 获 悉 。 对 于 这 种 情形 ， 一 种 常见 的 处 理 方式 是 使 用 回调 函数 [callback， 也 
叫 事 件 处 理 程序 (event handler) ] 。 





回调 函数 的 工作 原理 如 下 : 给 了 解 事件 的 对 象 提供 一 个 函数 ， 事 件 发 生 后 


个 对 象 将 通过 调用 这 个 国 数 来 通知 你 。 在 JavaScript 中 ， 我 是 回调 函数 。 如 
这 种 处 理 模 式 。 果 你 愿意 ， 也 可 称 
我 为 事件 处 理 程 序 。 














浏览 器 ， 我 等 你 加 载 完 网 页 ， 


好 让 我 和 E 够 做 些 事 情 。 


我 是 浏览 器 ， 更 准确 
地 说 是 对 象 window。 






别 坐 等 呀 ， 给 
我 提供 一 个 同调 七 数 好 了 ， 
我 完事 就 调用 它 。 













没 问题 ， 这 就 
给 ， 包 名 为 mit。 
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收 到 ! 我 已 经 将 我 的 
onload 属 性 设置 为 init， 这 样 
就 不 会 忘记 了 。 









@00 ) [9 Planets 





© 二 GCG 会 | [9 localhost/~Beth/HFJS/chapt... | > 





















总 算 把 网 页 加 载 好 了 ， 
真 累 。 接 下 来 该 于 什么 呢 ? 需 
要 调用 属性 onload 指 向 的 芒 数 。 
吻 ， 它 指向 号 数 init。 调 用 这 个 
咏 数 1 





CGC 会 | [localhost/~Beth/HFJS/chapt... | > 












Green Planet 






Allis well 


Red Planet 


Nothing to report 


Blue Planet 


All systems A-OK 
















方法 init 被 调 周 并 执行 完 华 






浏览 器 ,谢谢 你 记得 调 肘 
initr 一 切 都 顺风 上 顺水 ! 





所 人 已 省 | [9 localhost/~Beth/HFJS/chapr. »| 三 















Green Planet 


init 被 调用 后 ， 我 们 看 


Red Planet 到 网 页 更 新 了 | 
Nothing to report 

Blue Planet 

All systems A-OK 
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思考 函数 和 事件 处 理 程序 











有 意思 。 我 可 以 将 事件 发 生 后 要 执行 的 代 
码 放 在 唔 数 中 。 还 可 以 像 这 样 使 用 号 数 来 
处 理 哪些 其 他 的 事件 呢 ? 


你 说 的 没 错 。 如 果 你 愿意 ， 还 能 使 用 这 种 方式 处 理 
很 多 事件 。 有 些 事件 是 浏览 器 生成 的 ， 如 加 载 事 件 ， 
有 些 事件 是 用 户 与 网 页 交互 时 生成 的 ， 还 有 些 事件 是 
JavaScript 代 人 码 生 成 的 。 


刚才 的 示例 演示 了 “网 页 加 载 完 毕 ” 事 件 ， 我 们 通过 
设置 对 象 windqow 的 属性 on1loaqd 来 处 理 它 。 你 还 可 编 
写 这 样 的 事件 处 理 程序 : 每 隔 5$ 秒 钟 调用 一 次 ;在 有 
来 自 Web 服 务 的 数据 需要 处 理 时 调用 ， 在 用 户 单 击 按 
钮 后 ， 需 要 从 表单 获取 数据 时 调用 ， 等 等 。 创 建 更 像 
应 用 程序 而 不 是 静态 文档 的 网 页 〈 谁 都 希望 自己 的 网 
页 如 此 ) 时 ， 将 大 量 地 使 用 上 述 事件 。 刚 才 简 要 地 介 
绍 了 一 下 事件 处 理 程 序 ， 鉴 于 它们 在 JavaScript 编 程 中 
扮演 着 至 关 重 要 的 角色 ， 本 书后 面 将 花 大 量 的 篇 幅 讨 
论 它 们 。 

















性 笔 上阵 


St 








下 面 的 HTML 显 示 一 个 歌曲 播放 列表 ， 但 该 列表 是 空 的 。 
请 补 全 下 述 在 该 列表 中 添加 歌曲 的 JavaScript 人 代码， 然 
Laoctype html> 人 ”这 是 网 页 的 HTML。 ”后 查看 本 章 未 尾 的 答案 ， 再 接着 往 下 阅读 。 


<html lang="en"> 
<head> 
<title>My Playlist</title> 


脚本 。 议 些 代码 在 <ul> 元 索 
4 一 一 定义 的 列表 中 添加 歌曲 。 


<meta charset="utf-8"> 


<script> 
addSongs() { we g 
var songl = document. (" "); 0 | 
var = (" "); 
var 三 .getElementById(" “7 
.innerHTIML = "Blue Suede Strings, by Elvis Pagely"; 
= "Great Objects on Fire, by Jerry JSON Lewis"; 
song3. = "I Code the Line, by Johnny JavaScript"; 
} 
window. 三 ? 
</script> 
</head> 
<body> 


<hl>My awesome playlist</h1> 





空 的 歌曲 列表 。 前 述 Java5Script 
<ul id="playlist"> 于 - 
ul id="playlist 纪 。 代码 将 给 播放 列表 中 的 每 个 <liy 
<1Li id="songl"></1Li> 元 素 添 加 内 容 。 
<li id="song2"></1i> e800 My Playlist 
le le mp://ocamosw -eeeae © | 
7 es oo co 
</ul> 正确 地 补 全 JavaScript { My awesome playlist 
代码 并 加 载 该 网 页 后 ， ® Blue Suede Strings, by Elvis Pagely 
</body> i Si 。 Great Objects on Fire. 
eey 它 应 该 类 似 于 这 样 。 tpi 
</html> 
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用 JavaScript 修 改 网 页 样式 


别 停 下 ， 继 续 前 进 


来 看 看 你 刚才 做 的 : 你 在 一 个 静态 网 页 中 添加 代码 ， 从 而 动态 这 正 是 我 们 的 目标 ， 第 8 
多 全 面 实 现 这 | 目标 。 


地 修改 了 一 个 段落 的 内 容 。 这 看 似 简单 ， 却 是 创建 真正 交互 式 1 
网 页 的 第 一 步 。 


下 面 来 迈 出 第 二 步 : 知道 如 何 获 取 DOM 中 的 元 素 后 ， 咀 们 来 使 
用 代码 设置 元 素 的 特性 。 Eee mn -a 














川 Ss 





€ CQ 会 | [1 localhost/~Beth/HFJS/chapte... | » 
这 很 有 趣 ， 为 什么 呢 ? 继续 前 面 简单 的 星球 示例 ， 在 将 段落 的 
内 容 设 置 为 Red Alert 的 同时 ， 还 可 将 其 颜色 设置 为 红色 ， 这 无 Green Planet 
疑 将 更 清晰 地 传递 信息 。 pi 


具体 做 法 如 下 。 Red Planet 
G4) 给 redtext 类 定义 一 条 0$SS 和 规则 ， 将 段落 文本 设置 为 红 Ee 
色 。 这 样 ， 被 加 入 到 这 个 类 的 元 素 的 文本 都 将 为 红色 。 Blue Planetf 


All systems A-OK 


QQ) 接 下 来 ， 添 加 这 样 的 代码 ， 获 取 id 为 greenplanet 的 段 
落 元 素 ， 并 将 其 加 入 redtext 类 。 





就 这 么 傈 单 。 现 在 ， 我 们 只 需 学 习 如 何 设置 元 素 的 特性 ， 束 能 


够 编写 这 样 的 代码 了 。 
Di 


将 大 脑 的 男 一 部 分 也 开动 起 来 如 何 ? 请 给 redtext 类 定义 C55 样式 ， 将 星球 段落 的 文 
本 设置 为 红色 。 如 果 你 很 久 没 有 编写 CS5， 也 不 用 担心 ， 你 完全 可 以 试 一 试 ， 如 果 你 
闭 着 眼睛 都 能 编写 出 来 ， 那 就 太 好 了 。 管 案 在 本 章 末 尾 。 





如 何 使 用 setAttribute 没 置 特性 


元 素 对 象 有 一 个 setAttripute 方 法 ， 你 可 调用 它 来 设置 HTML 元 素 的 特性 。 要 
调用 这 个 方法 ， 可 像 下面 这 样 做 : 


获取 的 元 素 对 象 
Vd 请 注意 ， 如 果 指 定 的 特性 不 


planet.setAttributel("class", "redtext"); 


使 用 方法 setAttribute 添 加 [ 
新 特性 或 修改 既 有 特性 。 这 个 方法 接受 两 个 实 参 :要 添 。 要 设置 的 特性 值 。 
加 或 修改 的 特性 的 名 称 …… 


可 对 任何 元 素 调 用 setAttribute 来 修改 特性 的 值 ， 如 果 指 定 的 特性 不 存在 ， 将 
在 元 素 中 添加 它 。 例 如 ， 来 看 看 执行 上 述 代 码 将 给 DOM 市 来 的 影响 : 





过 
PN 

\ 
ek 






document | 

调用 方法 setAttribute 前 的 

元 素 ， 注 意 这 个 元 素 已 经 有 

一 人 上 性 尾 ， 

上 特性 id。 
一 人 > pid=“blueplanet” 
All is Nothing to All systems 
well report A-OK 
执行 后 


调用 方法 setAttribute 后 的 元 素 。 
现在 它 有 两 个 特性 : id 和 class。 







docvument 


史记 了 ， 调 用 方法 setAttribute 


时 ， 将 修改 DOM 中 的 元 素 对 象 ,| pid= “greenplanet” oclass="redtext" pid= “redplanet” pid= “blveplanet” 
这 种 修改 将 立即 在 浏览 器 显示 


< All is Nothing + All systems 
的 网 页 中 反映 出 来。 有 wel report 和 ok 





你 现在 的 位 置 ， 


存在 ， 将 在 元 素 中 创建 它 。 
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获取 特性 的 值 


获取 特性 


需要 获取 元 系 的 特性 值 ? 没 问 题 ， 有 一 个 方法 


lgetAttribute， 你 可 调用 它 来 获取 HTML 使 用 getElementByld 获 取 一 个 指向 元 素 的 引 
元 素 的 特性 的 值 用 ， 上 再 使 用 方法 getAttribute 获 取 特 性 的 值 。 
传 入 要 获取 其 值 


Le 十 Led 
var scoop = document.getElementById("raspberry"); 的 特性 的 名 称 。 
var altText = scoop.getAttribute("alt"); 
console.log("I can't see the image in the console,"); 


console.log(" but I'm told it looks like: " + altText); 


如 果 指 足 的 特性 不 存在 ， 结 果 将 如 何 
还 记得 调用 getElementById 时 指定 的 id 在 DOM 中 不 存 
在 的 情形 吗 ? 将 返回 null。getAttribute 亦 如 此 。 如 
果 指 定 的 特性 不 存在 ， 将 返回 nul1l。 下 面 演 示 了 如 何 检 
查 这 种 情况 : 


=d t.gqetEl tById(" b 机 、 

var scoop = document.getElementById("raspberry") 多 查 是否 返 回 了 一 个 特性 值 ， 

var altText = scoop.getAttribute("alt"); > 0 

if (altText == null) { 如 ~ 如 果 没 有 返回 特性 
值 ， 就 这 样 做 。 


console.log("Oh, I guess there isn't an alt attribute."); 


} else { 
console.log("I can't see the image In the console,"); A— 如 采 退 加 了 特性 值 ， 
就 5 制 台中 显示 
console.log(" but I'm told it looks like " + altText); 乓 可 在 控制 台中 显示 
其 文本 内 容 。 
} 







别 忘 7 getElementByld 也 可 能 反问 nul 


每 当 你 获取 值 时 ， 都 一 定 要 确认 获得 了 期 望 的 值 …… 





调转 getElewentgyldd ， 如 果 指 定 的 元 素 id 在 00M 中 不 存在 ， 它 将 返回 hull。 为 遵循 最 
佳 实践 ， 试 周 获取 元 素 时 ， 也 务必 检查 返回 的 是 否 是 nvll。 本 书 原本 也 应 遵守 这 种 规 
出 ， 但 如 果 这 样 做 ,篇幅 将 长 得 多 。 


回 到 星球 示例 
现在 将 这 些 代码 整合 到 星球 示例 中 ， 并 最 后 一 次 试 驾 。 


<Idoctype html> 


<html lang="en"> 星球 示例 的 完整 HIML、C55 


<head> 和 JavaScript 代 码 。 
<meta charset="utf-8"> 
a >» 我 们 定 义 3 redtext 类 ， 这 样 在 代码 
中 将 元 素 的 特性 class 设 置 为 redtext 
.redtext { color: red; } 时 ， 其 文本 将 变 成 红色 。 
</style> 
<script> 
function init() { 由 来 复习 一 下 : 获取 
var planet = document.getElementById("greenplanet"); id 为 greenplanet 的 元 
planet.innerHTML = "Red Alert: hit by phaser fire!"; 康 ， 并 将 其 存储 到 变 
planet.setAttribute("class", "redtext"); 和 _ se 然后 , 修 
| = Ps pi 
. ;0 ZC 系 ) 修 
wn = init.; | 加 一 个 clasa 特 性 ， 将 
网 页 加 载 完 毕 后 出 调用 好 数 init。 这 个 元 素 的 文本 改 成 
</head> 红色 , 
<body> 
<hl>Green Planet</hl1> 
<p id="greenplanet">All is well</p> 
<hl>Red Planet</h1> 
<p id="redplanet">Nothing to report</p> 
<hl>Blue Planet</hl1> 
<p id="blueplanet">Al]l] systems A-OK</p> 
</body> 
</html> aa : 
| Kotou homty-Bunhi/ HeyS /chunce. | a = 








De Ws ^ 有 局 下 (2 
臣 后 一 次 试 冤 
Green Planet 


在 浏览 器 中 加 载 这 个 网 页 ， 你 将 看 到 绿色 星球 被 移 相 
We ee 网 ed Alert: hit by phaser fire! 
武器 (phaser) 击 中 了 ， 且 消息 为 亮 红 色 ， 相信 你 - 定 AAA 

会 注意 到 | Red Planet 


Nothing to report 


Blue Planet 


All systems A-OK 
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可 以 用 DOM 做 什么 


VOM 还 有 哪些 功能 


ele 


些 。 


并 将 其 关联 到 树 
中 的 另 一 
从 而 将 其 加 入 到 


DOM 中 。 





星 陈 既 


绍 的 以 外 ， 
面 简 单 地 说 说 ， 


有 














在 DOM 中 查找 并 
获取 一 个 或 多 个 


元 素 。 














DOM 还 有 很 多 其 他 功能 ， 本 书后 面 将 介绍 其 中 的 一 
让 它们 次 次 地 刻 在 你 脑 诲 中 。 


从 DOM 获 取 元 素 

这 一 点 你 里 就 知道 7 了 ， 因为 我 们 一 直 在 使 用 
document.getElementByld， 但 还 有 其 他 获取 元 素 
的 方式 。 事 实 上 ， 你 可 以 使 用 标签 名 、 类 名 和 和 
特性 来 获取 一 系列 元 素 (如 所 有 归属 于 on_sale 
类 的 元 素 ) 。 你 还 可 获取 周 户 葵 入 的 表单 值 ， 
如 input 元 素 的 文本 。 


创建 元 素 并 将 其 加 入 到 DOM 中 

你 可 以 创建 新 元 素 ， 着 将 它们 加 入 到 V00M 中 。 
当然 ， 你 对 0P0M 所 做 的 任何 修改 ， 都 将 在 浏 
览 器 洽 染 00M 夺 立即 反 喘 出 来 。 (这 是 件 好 
事 ! ) 


从 DOM 删 除 元 素 

你 还 可 以 从 0M 中 删除 元 素 ， 这 将 同时 删除 
其 所 有 子 元 素 。 同 样 ， 将 元 素 从 00M 删 除 后 ， 
它 也 将 立即 从 浏览 器 窗口 中 消失 。 


遍历 DOM 中 的 元 素 


有 了 指向 元 素 的 多 柄 后 ， 就 可 找 烈 其 了 所 有 子 元 素 ， 
可 获取 其 只 已 提 元 素 (位 于 同一 层级 的 所 有 元 素 ) ， 
和 还 可 获取 其 父 元 素 。D00M 的 结构 类 似 于 家 谱 ! 


QA 


在 浏览 器 内 部 ， 使 用 文档 对 和 象 模型 
(DOM) 来 表示 网 页 。 

浏 贤 吕 在 加 载 并 分 析 HTML 时 创建 网 页 

的 DOM 。 


在 JavaScript 代 码 中 ， 使 用 document 
对 象 来 访问 DOM。 
document 对 象 包含 你 可 用 来 访问 和 修 
改 DOM 的 属性 和 方法 。 


方法 document.getElementById 根 
据 id 从 DOM 获 取 一 个 元 素 。 

方法 aocument .getELementById 返 
回 一 个 表示 网 页 中 元 素 的 元 素 对 象 。 
元 素 对 象 包 含 一 些 属 性 和 方法 ， 你 可 
使 用 它们 来 读 取 和 修改 元 素 的 内 容 。 
属性 innerHTMIL 包 含 元 素 的 文本 内 容 
和 全 部 艇 套 的 HTML 内 容 。 


要 修改 元 素 的 内 容 ， 可 修改 其 属性 
innexrHTML 的 值 。 


通过 修改 属性 innerHTML 来 修改 元 素 
时 ， 所 做 的 修改 将 立即 在 网 页 中 反映 
要 获取 元 素 的 特性 值 ， 可 使 用 方法 
getAttribute, 

要 设置 元 素 的 特性 值 ， 可 使 用 方法 
setAttribute, 

如 果 将 包含 JavaScript 代 码 的 <script> 
元 素 放 在 网 页 的 <head> 元 素 中 ， 就 


必须 确保 在 网 页 加 载 完 毕 后 再 修改 
DOM。 


可 使 用 window 对 象 的 onload 属 性 给 

加 载 事 件 指 定 事件 处 理 程序 〈 回 调 函 

数 ) 。 

WWM 页 加 载 完 毕 后 ， 将 立即 调用 window 
对 象 的 onload 属 性 指向 的 事件 处 理 程 
序 。 


在 JavaScript 中 ， 可 使 用 事件 处 理 程序 
来 处 理 很 多 不 同类 型 的 事件 。 
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JavaScript 填 字 游 戏 





JavaScript 迷 学 游戏 


请 完成 这 个 填 字 游戏 ， 将 DOM 知 识 深 深 地 刻 在 你 的 脑海 
a 
1 过 3 


横 回 


5. 处 理事 件 的 函数 被 称 为 事件 __ (复数 形式 ) 。 





7. 为 破解 Evel 博 士 的 密码 提供 了 线索 的 元 素 的 id。 


9. 为 处 理 加 载 事 件 ， 可 将 一 个 什么 赋 给 属性 window. 


onload? 

12. 要 修改 元 素 内 部 的 HTML， 可 使 用 元 素 对 象 的 哪 
个 属性 ? 

14. 方法 setAttribute 所 属 的 对 象 。 

15. DOM 的 形状 像 什么 ? 








纵向 


1. 被 移 相 武 强 击 中 的 星球 。 

2. 用 于 查看 代码 是 人 否 有 错误 的 工具 。 

3. 使 用 代码 来 获取 或 修改 网 页 的 元 素 前 ， 确 保 什 么 已 
加 载 完毕 至 关 重 要 ? 

4. 方法 getElementById 根 据 什 么 来 获取 一 个 元 素 ? 

6. 要 修改 元 素 的 属性 class， 可 使 用 哪个 方法 ? 

8. 总 是 位 于 DOM 树 顶部 的 对 象 。 

10. 使 用 getELlementByIdq 时 ， 务 必 检 查 它 返回 的 是 
合 征 什么 ? 

11. 在 剖 贤 娟 中 加 载 网 页 时 ， 剖 贤 娟 创建 一 个 什么 来 

表示 网 页 的 所 有 元 素 和 内 容 ? 

13. getElementById 是 aocument 对 象 的 一 个 什么 ? 





变 身 浏览 器 


你 的 任务 是 变 身 浏览 
器 。 亲自 对 HML 进 行 分 
析 痊 制作 00M。 现 在 就 
对 右边 的 HTML 进 行 分 
析 ， 关 在 下 面 绘 制 00M 
吧 。 开 关 部 分 已 经 为 你 
绘制 好 了 。 


Oo Movies 


[ae (|® http:/ /iocalhost/~Beth/HTMLS /Javascript2/ 地 avcoogle 


Movie Showtimes 





Plan 9 from Outer Space 
Playing at 3:00pm, 7:00pm. Special showing tonight at midnighi! 
Forbidden Planet 
<Idoctype html> mein 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Movies</title> 
</head> 
<body> 
<hL>Movie Showtimes</hL> 
<h2 id="moviel" >Plan 9 from Outer Space</h2> 
<p>Playing at 3:00pm, 7:00pm. 
<span> 
Special showing tonight at <em>midnight</em>! 
</span> 
</p> 
<h2 id="movie2">Forbidden Planet</h2> 
<p>Playing at 5:00pm, 9:00pm.</p> 
</body> 
</html> 


/ 这 是 我 们 绘制 的 DOM。 


WN 
hl h2 id="moviel” h2 id="movie2" 
hl jp Pp 





练习 答案 


(Ce 麻 笔 上 阵 
xc 、 
NS 末 下 面 的 HTML 显 示 一 个 歌曲 播放 列表 ， 但 该 列表 是 空 的 。 


请 补 全 下 述 在 该 列表 中 添加 歌曲 的 Javascript 代 码 。 答 
多“ 这 是 网 页 的 HTML。 ” 案 如 下 。 





<Idoctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 


这 些 代码 在 <ul> 元 素 
<title>My Playlist</title> 脚本 。 ee 
4 定义 的 列表 中 豚 加 歌曲 。 
<script> 
function addSongs() { 和 一 
请 补 全 这 些 代 码 ， 在 播放 列表 
var songl = document. getElementByld _(" sond1 ) 中 添加 歌曲 。 
var song2 = document.getElementByld (" song2 _"); 
var song3 = document .getElementById(" song3 _"); ) 
Song1 .innerHTML = "Blue Suede Strings, by Elvis Pagely"; 


song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis"; 


song3. innerHTML = "I Code the Line, by Johnny JavaScript"; 
} 
window. onload = addSongs 
</script> 

</head> 


<body> 


<hl>My awesome playlist</h1> ee 
空 的 歌曲 列表 。 前 述 JavaScript 












<ul id="playlist"> 上 代码 将 给 播放 列表 中 的 每 个 <li> 
pa 

<1li id="songl"></1i> 元 素 添 加 内 容 。 

<1L1 id="song2"></l1i> 这 i 

1i donod eld | < | ~ ) 出 http:/ /localhost/~Beth/Heac C (co 总 

ial 加 载 该 网 页 后 ， > My awesome playlist 
它 类 似 于 这 样 。 es Blu S . 
e Suede Strings, by Elvis Pagely 
</ body> 。 Great Objects on Fire, by Jerry JSON Lewis 
® I Code the Line, by Johnny JavaScript 

</html> 








将 大 脑 的 另 一 部 分 也 开动 起 来 如 何 ?” 请 给 redtext 类 定义 CS9 样 式 ， 将 星球 段落 的 文 
本 设置 为 红色 。 如 果 你 很 久 没有 编写 C99， 也 不 用 担心 ， 你 完全 可 以 试 一 试 ， 如 果 你 
闭 着 眼睛 都 能 编写 出 来 ， 那 就 太 好 了 。 








.redtext { color: red; 


} 


JavasScript 精 年 游戏 管 案 





请 完成 这 个 填 字 游戏 ， 将 DOM 知 识 深 深 地 刻 在 你 的 脑海 中 。 
记 “Ce 3p 
TR O A 
HIAINIbDILIEIRIsS 和 MN 6 
E ENS clolpleEl9 
FlulINIclTITIOIN O 
P 国有 A 国生 | C 
L 上 下 国有 =E MN U 
A 加 TT UM 
14ININIElIRIHITIMIL NOME 
E MI ElLIEIMIEINIT 
下 B T 下 
U H 
T O 
pl | D 
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7 类 型 、 相 等、 转换 竺 





该 系统 地 讨论 类 型 了 。JavaScript 的 优点 之 一 是 ， 你 无 需 知道 这 种 语 
言 的 很 多 细 广 ， 就 可 以 使 用 它 来 做 很 多 事情 。 但 要 真正 掌握 这 门 语言 、 提 
升水 平 ， 做 到 人 生 中 梦 霖 以 求 的 事情 ， 你 必须 对 类 型 了 如 指 和 区 。 还 记得 
本 书 前面 是 怎么 说 JavaScript 的 吗 ? 是 不 是 说 它 命 不 好 ， 不 是 出 生 在 高 贯 
的 学 术 殿 党 ， 也 未 经 同行 审 咬 ”确实 如 此 ， 但 非 科 班 出 时 不 妨碍 史 蒂 夫 ， 
乔布斯 和 比尔 . 盖 茨 取得 成 功 ， 对 JavaScript 来 说 亦 如 此 。 这 确实 意味 着 
JavaScript 的 类 型 系统 并 不 特别 续 密 ， 我 们 会 发 现 它 有 一 些 怪癖 。 不 过 不 
用 担心 ， 本 革 将 把 这 些 怪 壮 解 释 得 一 清二 楚 ， 你 很 快 就 能 避免 各 种 与 类 
型 相关 的 难堪 错误 。 
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真相 就 援 在 嘟 里 


你 已 经 有 丰富 的 JavaScript 类 型 使 用 经 验 ， 你 知道 有 数字 、 字 符 串 和 
布尔 值 等 基本 类 型 ， 还 知道 有 各 种 对 象 ， 其 中 有 些 是 JavaScript 提 供 
的 (如 Math 对 象 ) ， 有 些 是 浏览 器 提供 的 (如 dqocument 对 象 ) ， 
还 有 些 是 你 自己 编写 的 。 你 不 正 沐 浴 在 JavaScript 人 简单 、 强 大 、 一 致 
的 类 型 系统 的 光辉 下 吗 ? 





数字 、 字 符 串 和 布尔 值 用 于 表示 问题 空间 中 事 
等 低级 基本 类 型。 物 的 高 级 对 象 


这 些 都 是 SR 
0 + 提供 的 。 人 提供 了 大 量 有 用 的 对 
象 ; 你 也 可 以 创建 目 己 的 对 象 ， 或 
者 使 用 其 他 开发 人 员 编 写 好 的 对 象 。 





有 这 样 的 Web 镇 官方 语言 ， 你 还 有 什么 不 满足 的 呢 ?” 事 实 上 ， 如 
林 你 只 电 脚 本 编写 人 员 ， 可 能 考虑 坐 下 来 ， 喝 杯 Web 镇 生产 的 马 
提 尼 ， 放 松 一 下 早已 疲惫 不 堪 的 身心 …… 


但 你 不 仅仅 是 脚本 编写 人 员 ， 总 觉得 还 缺点 什么 。 你 隐隐 地 觉 
得 ， 在 Web 镇 尖 桩 入 机 的 后 面 ， 有 什么 离奇 的 东西 在 起 作用 。 你 
听 人 说 字符 串 就 像 对 象 一 样 ， 你 阅读 过 探讨 nul 1 类 型 的 博客 ， 
还 有 传言 说 JavaScript 解 释 器 近来 一 直 在 做 一 些 怪异 的 类 型 转 
换 。 所 有 这 一 切 都 意味 着 什么 呢 ? 我 们 不 知道 ， 但 真相 就 摆 在 那 
里 ， 本 章 将 把 它 揭 示 出 来 ， 这 可 能 会 完全 颠覆 你 当前 的 看 法 。 




















类 型 、 相 等 、 转 换 等 


一 大 拨 JavaScript 值 乔装 打扮 ， 正 在 玩 一 个 “ 狂 猿 我 是 谁 ” 的 晚 
会 游戏 ， 其 中 还 混入 了 一 些 不 速 之 客 。 你 需要 根据 它们 对 自己 
的 换 述 猜测 它们 的 身份 一 假设 它们 说 的 都 是 真 话 。 请 用 和 荫 头 
将 每 条 换 述 连接 到 相应 的 参与 者 ， 我 们 已 经 猪 出 一 个 了 。 请 将 
你 的 答案 与 本 章 末 尾 的 答案 对 比 ， 再 继续 往 下 阅读 。 

如 果 你 发 现 这 个 练习 很 难 ， 看 看 答案 也 没关系 。 








参与 游戏 的 值 : 


汶 


我 是 没有 return 语 句 的 函数 返回 的 值 ，。 


我 是 未 赋值 的 变量 的 值 。 


null 
我 是 稀疏 数组 中 不 存在 的 数组 元 素 的 值 ，。 一 undefined 
NaN 
我 是 不 存在 的 属性 的 值 . “ 
infinity 
我 是 已 删除 的 属性 的 值 。 
area 1 
我 是 创建 对 象 时 不 能 赋 给 属性 的 值 。 











Undefined 


小 心 ， 你 可 能 意外 遭遇 undefined 








正如 你 看 到 的 ， 在 任何 不 确定 的 情况 下 


不 存在 (或 已 删除 ) 的 属性 、 使 用 不 存在 的 数组 元 素 时 


undefined,。 


undefined 到 底 是 什么 ? 它 其实 并 不 复杂 。 你 可 以 这 么 认为 : 对 于 任 
何 还 没有 值 ( 即 还 未 初始 化 ) 的 东西 ， 都 会 将 undefineqd 赋 给 它 。 

这 样 做 有 什么 好 处 呢 ? undefined 让 你 能 够 判断 是 否 给 变量 
数组 元 素 ) 赋值 了 。 来 看 两 个 示例 ， 先 从 未 赋值 的 变量 着 手 : 


可 检查 变 重 (如 x) 是 否 是 未 定义 
的 。 为 此 ， 只 需 将 其 与 undefined 


Ia 


Var XX, 


进行 比较 。 


if (x == undefined) { 


// x 未 定义 ! 处 理 这 种 情况 | 


对 象 的 属性 呢 ? 


使 用 未 初始 化 的 变量 、 访 问 





你 都 将 遭遇 


(属性 或 





undefined， 请 不 要 将 其 与 
字符 串 “undefined” 温 为 
一 谈 ， 


可 检查 属性 是 否 是 未 定 
义 的 。 为 此 ， 也 可 将 其 
var customer = { Sundefined 进 行 比较 。 
name: "Jenny" 
}; 
if (customer.phoneNumber == undefined) { 


// 获取 客户 的 电话 号 码 


世上 滩 有 
晶 知 的 问题 


[9) ; 在 什么 情况 下 ， 需 要 检查 变量 (属性 或 数组 元 素 ) 
是 否 是 未 定义 的 ? 


A 

只 ”这 取决 于 你 的 代码 设计 。 在 你 编写 的 代码 中 ， 如 果 
代码 块 执行 时 ， 必 性 或 变量 可 能 没有 值 ， 就 需要 检查 它 是 
否 是 undefined,， 避免 在 计算 中 使 用 未 定义 的 值 。 


» 
(5): 既然 undefined 是 一 个 值 ， 那 它 有 类 型 吗 ? 


xc 8 

合 "， 有 。 行 丰 加 全 下 区 后 和 的 美 二 二 TOeEdnea 为 什么 " 
我 们 认为 原因 如 下 : 它 不 是 对 象 ， 不 是 数字 、 字 符 串 或 布 
尔 值 ， 也 不 是 任何 明确 的 东西 。 既 然 如 此 ， 为 何不 将 这 种 
类 型 也 秽 为 未 足 义 的 呢 ? 这 是 JavaScript 怪 异 的 灰色 地 带 之 
一 ， 你 不 得 不 接受 。 


类 型 、 相 等 、 转 换 等 


Ps 1 了 
头 壹 


在 实验 室 ， 我 们 喜欢 将 东西 拆 开 ， 看 看 里 面 的 情况 ， 接 上 诊断 工具 
以 搞 清楚 到 底 出 了 什么 问题 。 今 天 ， 我 们 要 研究 的 是 JavaScript 的 类 
型 系统 ， 而 我 们 已 经 找到 了 一 个 小 小 的 诊断 工具 typeof， 可 用 于 检 
查 变 量 。 请 你 穿 上 实验 服 ， 戴 上 护 目 镜 ， 进 入 实验 室 ， 与 我 们 一 道 
来 做 实验 吧 。 


typeof 是 一 个 内 置 的 JavaScript 运 算 符 ， 可 用 于 探测 其 操作 数 (要 
对 其 进行 操作 的 东西 ) 的 类 型 ， 如 下 例 所 示 : 








1 I 天 运算 符 Ltypeof 接 受 一 个 操作 多 司 
ee 


var probe = typeof subject; 
console.log(probe); - 
让 一 广 里 的 类 型 是 string。 注 意 到 
typeof 使 用 字符 串 来 表示 类 
型 ， 如 “string” “boolean” 
“number” “object” “undefined” 


JavaScript 控 制 全 





String 





等 
~ \ 主 . \ 直 安 
该 你 了 。 请 收集 下 述 实验 的 结果 。 
var testl1l = "abcdef"; et 
var test2 = 123; JavaScript 控 制 合 
var test3 ~ true;  ， 这 些 是 实验 数据 ， 而 
var test4 = {}; 六 此 里 实 哈 
Var test5 = []; 人 
var test6; 
var test7 = {"abcdef": 123}; 
var test8 = ["abcdef", 123]; 


function test9(){return "abcdef"}; 


console.log(typeof test1); 
console.log(typeof test2); 

console.log(typeof test3); 
console.log(typeof test4); 
console.log(typeof test5); 
console.log(typeof test6); 《在 这 里 列 出 实验 结果 ， 


console.log(typeof test7); i “ 
全民 他 1 ly O00 
console.log(typeof test8); 水 恒 讶 的 地 方 031 


console.log(typeof test9); 
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思考 nul| 









我 记得 前 一 章 说 和 过， 指定 的 id 不 存在 时 ， 
getElementById 返 加 null, 而 不 是 
undefined。null 到 底 是 什么 ? 
getElementById 为 何不 返回 undefined 呢 ? 







这 确实 让 人 感到 迷惑 。 在 很 多 语言 中 ， 都 有 一 个 表示 “无 对 象 ” 
的 概念 ， 这 挺 好 。 束 拿 方法 document .getElementById 来 说 
吧 ， 是 不 是 要 求 它 返回 一 个 对 象 ? 如 采 它 无 法 返回 一 个 对 象 呢 ? 
在 这 种 情况 下 ， 我 们 希望 返回 一 个 含义 如 下 的 值 : 要 是 有 对 象 ， 
我 束 会 是 一 个 对 象 ， 可 当前 没有 。 这 正 是 nul11 的 含义 。 


你 还 可 直接 将 变量 设置 为 nul1: 
var killerObjectSomeday = null; 


将 变量 设置 为 nul1 征 什么 意思 呢 ? 意思 征 说 我 原本 要 将 一 个 对 象 
赋 给 这 个 变量 ， 但 现在 没有 这 样 的 对 象 。 


你 可 能 接着 头 说 ， 为 何不 使 用 undefined 来 表达 这 种 意思 呢 ?” 很 
多 人 都 这 么 想 。 原 因 是 JavaScript 刚 面世 时 是 这 么 想 的 ， 用 一 个 值 
表示 变量 还 未 初始 化 ， 用 男 一 个 值 表 示 没 有 对 象 可 赋 给 变量 。 这 
并 不 完美 ， 而 且 显 得 有 些 多 余 ， 但 现实 情况 就 是 如 此 。 你 只 需 牢 
记 undefined 和 null 各 自 的 用 途 ， 并 知道 下 面 一 点 就 行 了 : 在 
应 该 提供 一 个 对 象 ， 但 无 法 创建 或 找到 时 ， 将 提供 nul1l; 在 变 
量 未 初始 化 、 对 象 没 有 指定 属性 或 数组 没有 指定 元 素 时 ， 将 返回 


undefined,。 























加 到 实验 室 


_ 


鹃 是， 刚才 的 实验 数据 遗漏 了 nul1。 下 面 是 遗漏 的 实验 : 


int 控 御 | 公 
var test10 = null; JavaScript 控 制 台 


-> 
console.log(typeof test10); 果 写 在 这 里 





如 何 使 肌 nul1 

很 多 函数 和 方法 都 返回 对 象 ， 你 需要 确认 获得 的 是 货真价实 的 对 象 而 不 是 
nul1， 以 防 国 数 无 法 找到 或 创建 要 返回 的 对 象 。 在 上 一 章 ， 你 见 过 需要 
进行 这 种 检查 的 示例 : 





唱 们 来 查找 非常 重要 的 
Var header = document.getElementById("header"); header 元 率 。 
If (header == null) { 
// 如 果 没 有 header 元 素 ， 肯 定 出 了 大 问题 
人 


哎呀 | 它 不 存在 ， 赶 快 弃 柄 | 








别 忘 了 ， 返 回 null 未 必 意 味 着 出 了 问题 。 这 可 能 只 是 意味 着 有 什么 东 
西 不 存在 ， 需 要 创建 它 或 可 以 忽略 它 。 假 设 你 的 网 站 有 一 个 天 气 小 部 件 ， 
用 户 可 以 打开 它 ， 也 可 以 关闭 它 。 如 果 用 户 打 开 了 它 ， 就 会 有 一 个 id 为 
weatherDiv 鸭 <div> 元 素 ; 否则 ， 束 没有 这 样 的 元 素 。 突 然 之 间 ，nul1 
便 可 派 上 大 用 场 : 





看 看 是 否 有 id 为 weatherDiv 


人 


Var weather = document.getElementById("weatherDiv"); 


// 为 div 元 素 weather 创 建 内 容 


如 果 getElementByld 返 回 的 不 是 null， 就 说 明 网 
页 中 有 这 样 的 元 素 ， 那 么 创建 一 个 漂亮 的 天 气 


别 奉 了，null 用 于 知 示 对 入 不 存在 。 


类 型 、 相 等 


、 转 换 等 


我 们 可 以 1 < he 
if (weather != null) { ge dd 
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TR 
， 计 欠 里 州 布 莱 恩 市 
小 部 件 (假定 在 其 中 显示 当地 的 天 气 情况 ) 。 :名 民 始 终 












可 以 很 容易 地 编 号 JavaSeript 语 名 来 生 
成 含义 不 明确 的 数值 。 


下 面 就 是 儿 杀 这 样 的 语句 : 






var a = 0/0; 
在 数学 中 ， 这 没有 明确 
人 多 答案 ， 四 此 不 能 要 求 


Java5Script 知 道 答 紧 。 









var b = "food" * 1000; 


我 们 不 知道 结果 是 什么 ， 


但 肯定 不 是 数字 | 





Var C= Math.sqrt(-9); 
个 如 果 你 的 高 中 数学 不 是 体 
言 老 师 教 的 ， 肯 定 知道 负 

数 的 平方 根 是 虚数 ， 在 
JavaScript 中 无 法 表示 。 


信 不 信 由 你 ， 有 些 数 字 值 在 JavaSceript 中 无 
法 表示 ! 有 鉴于 些 ，JavasSceript 提 供 了 一 个 


NaN 


JavaScript 使 用 NaN [通常 被 称 为 非 数 字 
(Not a Number) ] 来 表示 它 无 法 表示 的 数 
值 结 果 。 就 拿 0/0 来 说 吧 ， 在 计算 机 中 无 
法 表示 其 结果 ， 因 此 JavaScript 使 用 NaN 来 
表示 它 。 


NaN 可 能 是 世上 最 怪异 
的 值 。 它 不 仅 用 于 表示 
所 有 无 法 表示 的 数值 ， 
还 是 JavaScript 中 唯一 一 
个 与 目 己 不 相等 的 值 | 





类 型 、 相 等 


处 理 NaN 


你 可 能 认为 ， 需 要 处 理 NaN 的 情形 很 少 ， 但 只 要 你 编写 任何 使 用 数字 的 代码 ， 
都 将 尺 讶 地 发 现 它 现 身 的 频率 非常 频 莹 。 你 经 第 需要 检查 NaN。 基 于 学 到 的 


JavaScript 知 识 ， 你 可 能 认为 如 何 检 查 显 而 易 见 : \ 
Wy 
EE SS 
if (myNum == NaN) { 小 可 能 \ 为 这 样 做 可 行 ， AAA 无 
myNum = 0; 但 实际 上 行 不 通 。 K@ 


} 


敏锐 的 读者 会 认为 ， 这 就 是 检查 变量 是 否 为 NaN 的 方式 ， 但 实际 上 行 不 通 。 
为 什么 呢 ? 因为 NaN 与 任何 东西 (包括 它 自己 ) 都 不 相等 ， 因 此 不 能 以 任何 
方式 检查 变量 与 NaN 是 否 相等 。 相 反 ， 需 要 使 用 特殊 函数 1sNaN， 如 下 所 示 : 


oN\ 
和 一 二 a 
if (isNaN(myNum)) { 使 用 函数 isNaN， 它 在 传 入 NS 
Nu = 0 的 值 不 是 数字 时 退回 true。 TR 
} 


比 想 象 的 还 要 怪异 

来 更 深入 地 浪 虑 一 下 。 上 既然 NaN 指 的 是 “不 是 数字 ”， 那 它 是 什么 呢 ? 如果 
指出 它 是 什么 ， 而 非 它 不 是 什么 ， 是 不 是 更 容易 理解 呢 ? 那 你 认为 它 是 什么 
呢 ? 为 获得 一 点 线索 ， 可 检查 其 类 型 : 





JavaScript 控 制 合 


number 





var test1ll = 0 / o0; ER 
这 是 我 们 得 到 的 结 采 。 


console.log(typeof test11); 





、 转 换 等 





到 底 是 怎么 回 事 ? NaN 的 类 型 是 数字 ? 一 个 不 是 数字 的 东西 ， 其 类 型 怎么 可 7 
能 是 数字 呢 ? 别 急 ， 沉 住 气 ， 你 可 以 这 样 想 : NaN 是 一 个 糟糕 的 名 称 ， 与 其 如 果 你 一 点 也 不 吃惊 ， 那 
称 之 为 “不 是 数字 ”， 还 不 如 称 之 为 “无 法 表示 的 数字 ” (必须 承认 ， 这 样 。。 。 么 本 书 对 你 来 说 唯一 的 用 
首 字母 缩写 将 不 那么 出 色 ) 。 如 果 你 这 样 想 ， 就 可 认为 NaN 是 一 个 数字 ， 只 es 


是 无 法 表示 而 已 (至 少 对 计算 机 来 说 如 此 ) 。 


请 将 这 一 点 加 入 到 JavaScript 灰 色 地 带 中 。 
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关于 NaN 和 null 的 问题 


昌 关 的 问题 
ed 总 各 的 间 


w 中 
[5) s 问 isNaN 传 递 
会 返回 trzue 吗 ? 


一 个 不 能 转换 为 数字 的 字符 串 时 ， 它 


A 四 

吟 "' ， 那 是 肯定 的 ， 与 你 期 望 的 完全 一 致 。 如 果 变 量 存储 
的 是 NaN 或 其 他 任何 不 是 数字 的 值 ， 将 其 传递 给 isNaN 时 ， 
乞 部 将 返回 true (和 否则， 将 返回 falLlse) 。 但 有 几 点 需要 


注意 ， 这 将 在 后 面 讨论 类 型 转换 时 介绍 
0 


AAA ， 
吟 " ， 如 果 你 对 这 一 点 很 感 兴趣 ， 可 参阅 IEEE 浮 点 数 规 
范 。 对 于 这 个 问题 ， 简 单 的 答案 是 ， 因 为 NaN 指 的 是 无 


法 表示 的 数字 ， 但 并 非 所 有 无 法 表示 的 数字 都 相同 。 例 
如 ，sqrt(-1) 和 sqrt(-2) 的 结果 都 是 NaN， 但 它们 显然 不 
相同 。 


y 
[9) * 0/0 的 结果 为 NaN， 而 10/0 的 结果 为 
Infinity。Infinity 与 NaN 不 是 一 回 事 吗 ? 


A 
合 ， 好 眼力 。 在 JavaScript 中 ，Infinity 指 的 是 任何 超过 
浮 点 数 上 限 1.7976931348623157E+10308 〈 对 -Infinity 而 





Nn ep 在 /7 0 到 | 
: 兹 习 : 代码 闫 加 至 


吗 ? 


if (99 == "99") { 


console.log("A number equals a string!"); 


} else 1 


console.log("No way a number equals a string"); 


将 你 看 到 的 输出 写 在 这 蛙 。 
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， 有 是 指 超过 浮 点 数 下 限 一 1.797693134862315S7E+10308 ) 
值 。Infinity 的 类 型 为 数字 ， 怀 疑 某 个 值 太 大 时 ， 可 检 
它 是 否 为 Infinity: 


if (tamale == Infinity) { 
alert("That's a big tamale!"); 


六 


由 信 叫 


} 


\S 

[9); 得 知 NaN 的 类 型 是 数字 后 ， 我 确实 很 吃惊 。 还 有 其 

他 令 人 吃惊 的 细节 吗 ? 

A ， 

VD 这 个 问题 真有 趣 。 将 Infinity 与 它 自己 相 减 时 ， 
结果 为 NaN; ee 吗 ? 如 果 连 这 一 点 都 能 明白 ,说 

明 你 的 数学 非常 

, 8 

(9) : 既然 说 到 细节 ，nul11 的 类 型 是 什么 呢 ? 

A ， 

吟 ， 要 迅速 获得 答案 ， 可 对 null 使 用 运算 符 typeof。 

如 果 你 这 样 做 ， 结 果 将 为 "object"。 这 合情合理 ， 因 为 

null 用 于 表示 不 存在 的 对 象 。 不 过 这 存在 很 大 的 争议 ,在 

最 新 的 规范 中 ，null 的 类 型 为 hull1。 你 可 能 发 现 ， 浏 览 器 

的 JavaScript 实 现 没 有 遵守 这 种 规范 ， 但 很 少 需要 在 代码 中 

确定 null 的 类 型 


本 章 一 直 在 讨论 有 趣 的 值 ， 下 面 来 看 看 一 些 有 趣 的 行为 。 请 将 下 面 的 
一 个 基本 网 页 的 <script> 元 素 中 ， 有 再 加 载 该 网 页 
制 台 显示 的 是 什么 。 为 什么 会 出 现 这 种 情况 呢 ?” 你 能 猿 出 其 中 的 原因 


1， 看 看 探 


JavaScript 控 制 侣 





> 
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有 一 点 我 们 必须 告诉 你 

对 于 JavaScript， 有 一点 我 们 一 直 故 意 眶 着 没有 说 。 这 一 点 原本 
时 就 可 以 说 ， 但 现在 说 最 合适 。 

这 并 意味 着 我 们 一 直 在 欺骗 你 ， 而 只 是 意味 着 还 有 些 事情 需要 
补充 而 已 。 是 什么 事情 呢 ? 咱们 来 看 看 ; 

















设置 一 个 变量 ， 这 里 将 其 设置 为 数字 99。 


var testMe = 99; 





然后 ， 在 条 件 测试 中 将 其 与 一 
人 个 数字 进行 比较 。 
If (testMe == 99) { 


// 要 执行 的 操作 
} 
简单 易 懂 吧 ? 确实 如 此 ， 还 有 比 这 更 简单 的 吗 ? 然而 ， 本 书 前 
面 至 少 做 了 一 次 类 似 于 下 面 的 事情 ， 只 是 你 可 能 没有 注意 到 : 
设置 一 个 变量 ， 这 里 将 其 设置 为 字符 
(* 2 我 们 说 过 这 次 使 用 的 
是 一 个 字符 串 吗 ? 下 面 简单 地 复习 一 下 赋值 和 
相等 的 差别 。 


var testMe = "99". 






Var x = 99;， 


然后 ， 在 条 件 测试 中 将 其 与 一 个 数 
= 是 赋值 运算 符 ， 用 于 给 


处 
字 进 行 比 较 。 
if (testMe == 99) { < 一 将 一 个 字符 串 与 一 个 
// 要 执行 的 操作 数字 进行 比较 。 


\ 一 和 


比较 运算 符 ， 用 
于 对 两 个 值 进 行 比较 ， 
看 看 它们 是 否 相 等 。 


} 
将 数字 与 字符 串 进 行 比较 时 ， 结 采 将 如 何 呢 ? 太 乱 了 ? 计算 机 
届 沉 ?犹如 大 竺 上 的 骚乱 ? 
非 也 ，JavaScript 很 聪明 ， 能 够 判断 出 99 和 “99 ”实际 上 古 相 等 
的 。 但 它 在 医 后 到 撒 征 如 何 作出 这 种 判断 的 呢 ? 虽 们 来 看 看 。 
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相等 运算 符 


理解 相等 运算 符 


你 可 能 认为 ， 相 等 运算 和 任 很 容易 理解 ， 不 就 是 1 == 1、"guacamole" == 
"guacamole"、true -= true 吗 ? 然而 , 对 于 "99”-- 99， 显 然 需 要 做 更 


多 的 工作 。 相 等 运算 符 到 底 是 如 何 进 行 比较 的 呢 ? 


实际 上 ， 进 行 比较 时 ， 运 算 符 == 会 考虑 其 操作 数 (要 比较 的 两 个 值 ) 的 类 
型 。 这 存在 下 面 两 种 情况 。 





如 果 两 个 值 的 类 型 相同 ， 就 直接 进行 比较 

如 果 要 比较 的 两 个 值 的 类 型 相同 ， 如 比较 两 个 数字 或 两 个 字符 串 ， 将 
按 你 期 望 的 方式 进行 比较 : 将 这 两 个 值 进行 比较 ， 如 果 它 们 相同 ， 结 
果 为 true。 非 常 简 单 。 





如 果 两 个 值 的 类 型 不 同 ， 则 党 试 将 它们 转换 为 相同 的 类 

型 ， 笛 和 进行 比较 

这 种 情况 更 有 趣 。 假 设 你 要 对 两 个 类 型 不 同 的 值 进行 比较 ， 如 一 个 数字 和 一 

个 字符 串 ，JavaScript 将 把 字符 串 转换 为 数字 ， 再 进行 比较 ， 如 下 所 示 :， < 请 注意 ， 这 种 转换 是 临时 性 
的 ， 每 在 方便 比较 。 





_ 你 将 一 个 数字 和 一 个 字符 串 进行 
33 == “33” 比较 时 ，Java5cript 将 字符 串 转换 


为 数字 (如 果 可 能 的 话 ) 。 


再 尝试 进行 比较 。 如 果 它 们 相等 ， 整 个 
99 == 99 表达 式 的 结果 就 为 Lrue， 否 则 为 fa1se。 








这 让 你 有 一 定 的 直观 感受 ， 但 其 中 的 规则 是 什么 呢 ? 如 果 将 布尔 值 和 数 
字 、null 和 unaefined 或 其 他 值 进行 比较 呢 ? 我 怎么 知道 将 进行 什么 样 -I 
的 转换 呢 ? 为 比较 数字 和 字符 串 是 否 相等 ， 为 何不 将 数字 转换 为 字符 趾 ， /em 





或 采用 其 他 转换 方式 呢 ? JavaScript 规 范 包含 一 套 非 常 简单 的 规则 ， 指 定 
了 对 两 个 不 同类 型 的 值 进行 比较 时 ， 将 如 何 进 行 转换 。 你 必须 牢记 这 些 规 
则 ， 这 样 才能 掌握 JavaScript 比 较 的 工作 原理 。 


相 寺 运算 人 符 如 何 转 损 操作 数 
( 听 起 来 比 实际 上 危险 ) 


我 们 知道 ， 将 两 个 类 型 不 同 的 值 进行 比较 时 ，JavaScript 会 把 一 个 值 转换 为 
另 一 个 值 的 类 型 ， 再 进行 比较 。 你 可 能 觉得 这 很 奇怪 ， 因 为 在 其 他 语言 中 ， 
这 通常 不 是 自动 进行 的 ， 而 需要 编写 代码 显 式 地 进行 转换 。 不 过 ， 不 用 担 
心 ，JavaScript 自 动 类 型 转换 通常 是 件 好 事 ， 只 要 你 明白 转换 是 在 何 时 以 及 如 何 
进行 的 。 下 面 就 来 了 解 这 一 点 : 转换 是 何 时 以 及 如 何 进 行 的 。 


来 看 4 种 简单 的 情形 。 


情形 1: 比较 数字 和 字符 串 

比较 字符 串 和 数字 时 ， 都 将 把 字符 串 转换 为 数字 ， 再 对 两 个 数字 进行 比较 。 这 
并 非 总 是 可 行 ， 因 为 并 非 所 有 的 字符 串 都 可 转换 为 数字 。 字 符 串 不 能 转换 为 数 
字 时 ， 结 果 将 如 何 呢 ? 下 面 就 来 看 看 : 








4 八 再 况 雹 一 个 数字 和 一 个 字符 串 进 行 比 

一 二 1 L I 有 再 次 将 | 数字 和 | 加 

9 vanilla 较 ， 但 这 里 无 法 将 字符 串 转 换 为 数字 。 

99 == NaN 人 一 一 试图 将 “vanilla” 转 换 为 数字 时 ， 结 果 为 
NaN， 而 它 与 什么 东西 都 不 相等 ， 因 此 
最 终结 果 为 false。 


false 


情形 2: 比较 布尔 值 和 其 他 类 型 





在 这 种 情况 下 ， 将 把 布尔 值 转换 为 数字 ， 再 进行 比较 。 这 看 起 来 有 点 怪 ， 但 只 要 记 住 
true 将 被 转换 为 1， 而 false 将 被 转换 为 0， 就 容易 理解 了 。 另 外 ， 你 必须 明白 ， 在 有 些 





情况 下 ， 需 要 做 多 次 类 型 转换 。 下 面 征 一 个 示例 : 


1 == true 人 将 一 个 数字 和 一 个 布尔 值 进行 比 


/ 较 。 将 true 转 换 为 数字 1。 
1 1 么 一 ~ 再 将 1 和 1 进行 比较 ， 结 果 为 true。 
true 


类 型 、 相 等 、 转 换 等 














《7 工 门 | 过 二 /4 > 
你 现在 的 位 


Er 


= 


~ 
4 


277 


比较 值 


再 看 一 个 示例 ， 这 次 将 一 个 布尔 值 与 一 个 字符 串 进 行 比较 。 注 意 这 需要 执行 客 
外 的 步骤 : 
"1" == true J 将 一 个 字符 串 和 一 个 布尔 值 进行 比较 。 将 true 
/ 转换 为 数字 1。 
"1" == 1 研一 ~ 再 将 字符 串 “1” 与 数字 1 进行 比较 。 
1 == < 一 根据 情形 1 描述 的 规则 ， 将 字符 串 转换 为 数字 。 
true 现在 可 以 对 两 个 数字 进行 比较 了 ， 结 果 为 true。 


情形 3: 比较 null 和 undefined 


这 两 个 值 的 比较 结果 为 true。 这 好 像 有 点 怪 ， 但 规则 就 是 这 样 的 。 你 可 以 这 么 理 
解 ， 它 们 其 实 表示 的 都 是 “没有 值 ” (没有 值 的 变量 和 没有 值 的 对 象 ) ， 因 此 认为 
它们 相等 


undefined == null 


| 和 玫 一 一 undefined 和 null 相 等 。 








这 就 是 所 有 的 情形 ， 根 据 这 些 规则 ， 可 确定 任何 相等 表达 式 的 值 。 然 而 ， 还 存在 一 
些 边界 情况 和 需要 注意 的 地 方 。 一 个 需要 注意 的 地 方 是 对 象 的 比较 ， 这 将 在 本 书后 





面 介绍 。 男 一 个 需要 注意 的 地 方 是 ， 有 些 转换 可 能 让 你 独 不 及 防 ， 例 如 : 
1 二 三 和 1 比较 的 是 一 个 数字 和 一 个 字符 串 ， 因 此 
使 用 规则 1。 
1 == 0 全 一 一 信 不 信 由 你 ， 将 空 字 符 串 转换 为 数字 的 
| 结果 为 0。 
false < eee WA 四 此 整个 表达 式 的 结 
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如 果 对 两 个 值 和 进行 比 较 时 ,无 需 操 心 类 型 转换 
的 问题 就 好 了 ; 如 果 能 够 判断 两 个 值 是 否 相 等 
加 类 型 相同 就 好 了 ; 如 果 不 用 操心 所 有 这 些 规 
则 以 及 可 能 导致 的 错误 就 好 了 。 我 知道 ， 这 些 
都 是 白 日 做 梦 。 
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严格 相等 运算 符 


2 我 对 比较 的 要 求 
天 格 相 和 手 更 严格 些 。 
还 有 一 点 需要 告诉 你 : 相等 运算 符 有 两 个 ， 而 不 是 只 有 一 个 。 
我 们 已 经 介绍 了 == (相等 ) ， 另 一 个 是 === (严格 相等 ) 。 


设 错 ， 就 古 三 个 等 写 。 在 可 以 使 用 == 的 任何 地 方 ， 都 可 使 用 
===， 但 在 这 样 做 之 前 ， 一 定 要 明白 它们 之 间 有 何不 同 。 

你 知道 ， 使 用 == 对 两 个 类 型 不 同 的 操作 数 进行 比较 时 ， 涉 及 
很 多 有 关 如 何 对 操作 数 进行 转换 的 规则 。 使 用 === 时 ， 涉 及 
的 规则 更 复杂 。 


刚才 是 跟 你 开玩笑 的 ，=== 涉 及 的 规则 实际 上 只 有 一 条 。 











当 且 仅 当 两 个 值 的 类 型 和 值 都 相同 时 ， 它 们 


人 网 辑 提 醒 ， 请 确保 获得 


二 是 天 格 相 等 的 了 Doug Crockford 人 要 
NA < 眼 的 ji 又 o 
请 再 读 一 遍 。 这 意味 着 ， 如 果 两 个 值 的 类 型 相同 ， 就 对 其 进行 比 用 这 张 照 上 





较 ; 否则 ， 不 管 它 们 古 什么 ， 结 琳 都 为 false 一 一 不 进行 转换 ， 也 不 
考虑 各 种 复杂 的 规则 。 你 只 需 记 住 ， 仅 当 两 个 值 的 类 型 和 值 都 相同 
时 ，=== 才 认为 它们 相等 。 


SR 磨 笔 上 阵 
NS 对 于 下 面 的 比较 表达 式 ， 在 运算 符 == 和 === 下 方 分 别 写 出 它们 的 结 





"42 == 42 true "2 三 三 = 4d2 
"0" == 0 "0" === 
"0" == false "0" === false 
七 Tue ”== true “七 Tue ”=== true 
true == (1 == "1") true === (1 === "1") 
\ 难度 极 高 | \ 难度 极 高 | 
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y 

人 oj ; 如果 将 数字 (如 99) 同 无 法 转换 为 数字 的 字 
符 串 〈 如 "ninety-nine") 进行 比较 ， 结 果 将 如 
何 ? 

A 

人 ， JavaScript 尝 试 将 "nijnety-nine" 和 转换 为 数 
字 , 但 以 失败 告终 ， 结 果 为 NaN。 因 此 ， 这 两 个 值 不 
相等 ， 结 有 果 为 false。 


> 

[9); JavaScript 如 何 将 字符 串 转换 为 数字 ? 

Ape ， 
- 份 ， 它 使 用 一 种 算法 对 字符 事 中 的 每 个 字符 进行 分 
析 ， 并 尝试 将 其 转换 为 一 个 数字 。 因 此 ， 如 果 字 符 事 
为 "34" ，JavaScript 将 其 中 的 字符 "3" 和 "4" 转 换 为 3 
和 4。 你 还 可 将 类 似 于 "1.2" 这 样 的 字符 串 转 换 为 浮 
点 数 ， 因 为 JavaScript 很 聪明 ， 知 道 这 样 的 字符 串 可 
转换 为 数字 。 


人 
[9); 如 果 我 编写 类 似 于 "true" 
代码 ， 结 果 将 如 何 呢 ? 


true 这 样 的 


A 

只 ”。 这 是 对 字符 事 和 数字 进行 比较 。 根 据 相关 的 规 
则 ，JavaScript 将 首先 把 上 rue 转 换 为 1， 再 对 "truen 
和 1 进行 比较 。 接 下 来 ， 它 将 尝试 将 "truen" 转 换 为 数 
字 ， 但 以 失败 告终 ， 因 此 结果 为 falLse，。 


[9) s。 既然 有 运算 符 == 和 ===， 是 否 意 味 着 也 有 运 
算 符 <= 和 <== 以 及 >= 和 >== 呢 ? 


8 ~ » » AN 一 A pA 
只 ， 答 案 是 否定 的 ， 没 有 运算 符 <== 和 >==， 只 
有 <= 和 >=。 这 些 运算 符 只 知道 比较 字符 串 和 数字 


(true <= false 没 有 意义 ) ， 因 此 如 果 你 使 用 它们 
来 比较 除数 字 和 字符 串 外 的 其 他 值 ，JavaScript 将 尝 
试 根据 前 面 讨 论 的 规则 进行 类 型 转换 。 


[9); 如 果 我 编写 代码 99 <= "100"， 结 果 将 如 何 
晨 ? 


A . 
只 根据 相关 的 规则 ， 将 把 "100" 转 换 为 数字 ， 再 
同 99 进 行 比较 。 因 为 99 小 于 100， 所 以 结果 为 二 rue。 
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中， 有 运算 符 !== 吗 ? 

A 

喉 ， 有 。--- 比 -= 严格 ,同样 !== 也 比 !1= 严 格 
有 关 -=- 的 规则 也 适用 于 !==， 只 是 它 检查 是 否 不 等 ， 
而 非 是 否 相 等 。 


\S 

[9); 使 用 < 和 > 比较 布尔 值 和 数字 (如 0 < true) 
时 ， 也 会 使 用 同样 的 规则 吗 ? 

A 

号 ”。 没 错 。 就 这 个 例子 而 言 ， 将 把 true 转 换 为 1， 
因为 0 小 于 1， 所 以 结果 为 七 rue。 


y 

9) 。 两 个 字符 串 相 等 好 理解 ， 但 如 何 确 定 两 个 字 
符 串 谁 大 谁 小 呢 ? 

AAA ， 
合 "， 问 得 好 。 说 "panana"<"mango" 是 什么 意 
思 呢 ? 比较 两 个 字符 串 时 ， 根 据 字 母 排列 顺序 来 确 
定 谁 大 谁 小 由 于 "banana" 以 bb 打头， "mango" 以 
m 打 头 ， 而 b 在 字母 表 中 排 在 m 前 面 ， 因 此 "bananan 
比 下 击 而 可 @7 imang5eo 了 EnelLon 小 ， 因 为 虽然 
它们 的 第 一 个 字母 相同 ， 但 比较 第 二 个 字母 时 ， 发 现 a 
排 在 e 的 前 面 。 

然而 ， 这 种 按 字 母 排 列 顺序 进行 比较 的 方式 可 能 让 你 
犯错 。 例 如 ，"Mangon < "mango" 的 结果 为 true， 
但 你 可 能 以 为 M 比 m 大 ， 为 前 者 是 大 写 的 。 字 符 
事 的 排列 顺序 取决 于 计算 机 中 用 于 表示 各 个 字符 的 
Unicode 值 的 排列 顺序 (Unicode 是 一 种 以 数字 方式 表 
示 字 符 的 标准 ) ， 而 这 种 排列 顺序 并 非 总 是 与 你 的 预 
期 一 致 。 想 了 解 有 关 Unicode 的 详细 信息 ， 请 使 用 关 
键 字 Unicode 进 行 搜索 。 但 在 大 多 数 情 况 下 ， 你 只 需 
知道 基本 的 字母 排列 顺序 ， 就 能 判断 两 个 字符 串 谁 大 
谁 小 。 








小 示 仁 时 人 忆 直 
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炉 边 谈话 





跟 我 争 ， 也 不 看 看 我 是 谁 。 





在 现 有 的 全 部 JavaScript 代 码 中 ， 我 的 使 用 量 处 于 
领先 地 位 。 你 落后 了 ， 沙 后 得 还 不 是 一 星 半点 。 





我 不 这 么 认为 。 我 提供 的 服务 非常 重要 ， 谁 不 需 
要 时 不 时 地 将 字符 串 格式 的 用 户 输入 同 数字 进行 
比较 呢 ? 


上 小 学 时 ， 你 每 天 上 学 和 放学 都 必须 扑 雪 坡 吗 ? 
你 做 什么 事情 都 避 多 就 难 ? 


现实 情况 是 ， 你 能 做 的 比较 我 不 仅 都 能 做 ， 还 会 
进行 类 型 转换 。 


难道 不 管 三 七 二 十 一 ， 都 判断 结 末 为 faLlse 了 事 ? 


今 晚 主题 : 相等 运算 符 和 严格 
相等 运算 符 争夺 头 把 交椅 。 


你 别 忘 了 ， 多 位 JavaScript 大 师 都 说 了 ， 开 发 人 
员 应 使 用 我 ， 且 只 使 用 我 。 他 们 认为 应 将 你 从 
JavaScript 中 踊 出 去 。 





你 说 的 也 许 没 错 ， 但 开发 人 员 逐 半 醒 悟 过 来 了 ， 
这 些 统计 数字 正在 发 生变 化 。 


要 使 用 ==， 就 必须 牢记 各 种 规则 。 使 用 === 吧 ， 
这 样 生 活 和 代码 都 更 人 简单， 如 果 要 将 用 户 输 入 转 
换 为 数字 ， 有 提供 这 种 功能 的 方法 。 





真 搞 笑 。 行 事 严 诬 ， 确 保 比 较 语义 清晰 没有 和 错 ; 
不 牢记 各 种 规则 就 可 能 出 现 意 外 才 精 糕 呢 。 


每 次 看 到 你 那些 规则 ， 我 都 如 鲁 在 喉 。 我 是 说 
要 将 布尔 值 同 任何 值 比 较 ， 痢 得 将 其 转换 为 数字 
吗 ? 在 我 看 来 ， 这 大 不 合理 了 。 








到 目前 为 止 ， 这 确实 管用 。 看 看 既 有 的 JavaScript 
代码 吧 ， 很 多 邦 是 脚本 编写 人 员 编 写 有 的 。 





你 是 说 谈话 后 洗 个 并 什么 的 ? 


这 古 要 让 我 出 局 的 贡 委 ? 我 乐意 躺 在 沙 锥 上 ， 吻 
着 玛 格 丽 塔 你 内 地 消磨 时 光 。 


争论 == 和 === 谁 才 是 老大 是 在 浪费 时 间 。 我 是 说 
人 生 中 还 有 更 有 趣 的 事情 要 做 。 





现实 情况 古 ， 大 家 绝 不 会 不 骨 使 用 ==， 有 时 候 它 
确实 很 方便 。 大 家 可 以 合理 地 使 用 它 ， 在 合适 的 
情况 下 充分 发 挥 其 优势 。 就 拿 处 理 用 户 输入 来 说 
吧 ， 为 何不 使 用 == 呢 ? 





我 现在 的 看 法 是 ， 如 末 大 家 愿意 用 你 ， 那 很 好 ， 
而 我 随时 待命 ， 顺 便 说 一 句 ， 不 管 大 家 怎么 选择 ， 
者 不 影响 我 每 月 领 薪水 ! 还 有 很 多 使 用 == 的 遗留 
代码 一 一 我 永和 还 都 不 会 失业 。 
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当然 不 征 ， 我 定 说 你 那些 复杂 的 规则 可 能 让 人 不 
堪 重 人 负 。 


设 错 ， 但 网 页 越 来 越 复杂 、 越 来 越 精致 ， 该 遵守 
一 些 最 佳 实践 了 。 


比如 坚持 只 使 用 === 什 么 的 。 这 让 代码 更 清晰 ， 
还 避免 了 在 比较 中 出 现 十 怪 的 边界 情况 。 





我 看 不 像 吓 ， 还 以 为 你 要 占 着 头号 等 号 运算 符 的 
宇 座 不 放 ， 直 到 永远 呢 。 出 什么 事 了 ? 


我 都 不 知道 说 什么 好 了 。 


我 说 过 ， 世 事 难 料 。 








(17 工 门 | 过 一 册 信 人 一 -SEE 
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思考 相等 






好 像 还 不 够 令 人 迷惑 似 的 ， 
竞 然 有 两 个 相等 运算 符 。 我 
该 使 用 哪个 呢 ? 







沉 住 气 。 这 方面 存在 很 大 的 争论 ， 专 家 也 是 见 仁 见 
吞 。 我 们 的 观点 是 ， 传 统 上 ， 由 于 对 这 两 个 运算 符 及 
其 差别 认识 不 足 ， 程 序 员 通常 使 用 == (相等 运算 符 ) 。 
现在 ， 大 家 的 认识 更 深刻 了 ， 在 大 多 数 情况 下 ， 使 用 
=== (严格 相等 运算 符 ) 都 可 行 ， 从 某 种 程度 上 说 ， 这 
也 更 安全 ， 因 为 你 知道 结 采 会 契 什 么 。 当 然 ， 使 用 == 
时 ， 你 也 知道 结 采 会 征 什 么 ， 但 考虑 到 它 可 能 进行 各 
种 转换 ， 有 时 候 很 难 孝 虑 到 所 有 的 可 能 性 。 


在 有 些 情 况 下 ， 如 比较 数字 和 字符 串 时 ，== 提 供 了 很 
大 的 便利 。 在 这 些 情况 下 ， 应 大 胆 地 使 用 ==， 特 别 是 
芳 虑 到 你 与 很 多 JavaScript 程 序 员 都 不 同 ， 对 == 的 作用 
已 了 如 指 和 党， 因此 更 应 如 此 。 讨 论 === 后 ， 本 书 改 纺 易 
辐 ， 在 大 多 数 情况 下 都 使 用 ===， 但 我 们 会 灵活 处 理 ， 
在 == 能 够 简化 工作 且 不 会 引入 问题 的 情况 下 ， 也 会 使 
用 它 。 




















请 广 


下 面 征 对 一 些 运 算 符 的 描述 ， 
CAA 局 和 和 





= 
ES 


Cv 9 


述 与 相应 的 


运算 符 


每 个 运算 符 
连 起 来 了 。 
将 两 个 值 进 行 比较 ， 看 它们 是 否 相 等 
必要 时 会 对 操作 数 进 
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克 站 
起 来 吗 ? 


运算 符 连 





尔 能 将 它们 与 相应 的 
可 能 对 应 于 0、1 或 多 项 摘 述 。 我 们 已 经 将 一 项 摘 


AN 


人 
已 杖 
行 类 


称 为 相等 运算 符 
型 转换 ， 再 进行 比较 。 


将 两 个 值 进行 比较 ， 看 它们 是 否 相 当 ; 如 果 
两 个 值 的 类 型 不 同 ， 将 直接 返回 false。 


给 变量 赋值 。 
比较 两 个 对 象 引 用 ; 如 果 它 们 相同 ， 就 返 
回 tzue， 人 否则 返回 false。 
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类 型 转换 


深入 探讨 类 型 转换 


并 非 只 有 条 件 语句 会 导致 类 型 转换 ， 其 他 几 个 运算 符 也 可 能 会 导致 类 型 转 
换 。 这 些 转 换 则 在 为 程序 员 提 供 便利 ， 通 第 也 确实 如 此 ， 但 你 必须 准确 地 
知道 类 型 转换 可 能 在 什么 情况 下 和 什么 地 方 发 生 。 下 面 就 来 看 一 看 。 














再 伙 措 接 和 加 法 和 运算 符 

你 可 能 知道 了 ， 用 于 数字 时 ， 运 算 符 + 表示 加 法 运算 ， 而 用 于 字符 串 时 ， 表 示 
拼接 (concatenation) 。 然 而 ， 如 果 + 的 操作 数 的 类 型 不 同 ， 结 果 将 如 何 呢 ? 
下 面 就 来 看 看 。 

如 果 你 试图 将 数字 和 字符 串 相 加 ，JavaScript 将 把 数字 转换 为 字符 串 ， 再 进行 
拼接 。 这 与 == 运 算 符 的 情况 大 致 相反 。 








将 


履 字 和 字符 串 相 加 时 ， 执 行 的 
全 一 ”是 拼接 ， 而 不 是 加 法 运算 。 


Var addi = 3 二 "40; 


人 人 _ 变量 result 被 设 罚 为 “534”,， 
而 不 是 7， 


var plusi = "4" + 3; 二 同 理 ， 结 果 为 “43”，。 





将 数字 和 字符 串 相 加 时 ， 即 便 将 字符 串 放 在 前 面 ， 结 果 也 相同 将 数字 转换 为 字 
符 串 ， 再 进行 拼接 。 
其 他 算术 运算 符 呢 


对 于 其 他 算术 运算 符 ， 如 乘法 、 除 法 和 减法 运算 竹 ，JavaScript 将 认为 你 要 执行 的 古 算 术 
运算 ， 而 不 是 字符 





JavaScript 将 字符 串 “4” 转 换 为 数 


1ti = 3 * "4"; 
var multi 字 4， 再 将 其 乘 以 5， 结果 为 12。 

一 将 字符 串 “10” 转 换 为 数字 10， 再 将 
var divi = 80 / "10"; 80 除 以 数字 10， 结 果 为 8。 


将 字符 串 “10” 转 换 为 数字 10， 再 将 其 减 去 
5， 结 果 为 5。 


var mini = "10" - 5; ~ 
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世上 没有 
晶 敬 的 问题 


[9) 。 只 要 有 一 个 操作 数 为 字符 串 ， 就 会 将 + 视 为 字符 串 
拼接 吗 ? 


A 
只 "。 是 的 。 然 而 ， 由 于 + 的 结合 性 是 从 左 到 右 的 ， 如 果 你 


编写 了 下 面 的 代码 


Var oroer ss 1 二 之 直 "pPply>aeY 


结 采 将 为 "3 pizzas"，,， 而 不 是 "12 pizzas"。 这 是 因为 
从 左 往 右 计算 时 ， 先 将 1 和 2 相 加 (因为 它们 都 是 数字 ) ， 结 
果 为 3; 接 下 来 ， 将 3 与 字符 串 "pizzas" 相 加 ， 因 此 将 3 转 
换 为 字符 事 ， 再 拼接 这 两 个 字符 事 。 为 确保 得 到 想 要 的 结 
有 果 ， 可 使 用 括号 来 指定 先 执 行 的 运算 。 例 如 ， 下 面 的 语句 
确保 变量 order 存 储 的 是 "3 pizzas": 


Var order = (1 + 2) + " pizzas"; 


而 下 面 的 语句 确保 变量 order 郁 储 的 是 "12 pizzas": 


var Order = 1 中 (2 4 " piy2as")y 


隆 笔 上 阵 


KC 





4 
[9) * 就 这 些 吗 ? 换 名 话说， 还 有 其 他 可 能 发 生 类 型 转换 
的 情形 吗 ? 


A 

只 在 其 他 一 些 情形 下 ， 也 会 导致 类 型 转换 。 例 如 ， 运 
算 符 一 对 数字 取 负 ， 将 其 用 于 true 时 ,结果 将 为 一 。 另 外 ， 
将 布尔 值 与 字符 事 相 加 时 ， 结 果 为 字符 事 。 例 如 ，true + 
"love" 的 结果 为 true love。 这 些 情 形 很 少 出 现 ， 笔 者 在 
编写 代码 时 从 来 不 这 样 做 ， 这 里 提 及 它们 只 是 想 让 你 知道 
而 已 。 


[9) s 要 让 JavaScript 将 字符 串 转换 为 数字 ， 并 与 另 一 个 
数字 相 加 ， 该 如 何 办 呢 ? 


A 
喉 " 有 一 个 将 字符 串 转 换 为 数字 的 函数 ， 名 为 Number 
( 没 错 ， 其 中 的 N 就 是 大 写 的 ) 。 可 像 下 面 这 样 使 用 它 : 


var mum = 3 + Number(™"): 


这 条 语 铝 导致 变 量 num 的 值 为 7，、 通 数 Number 接 受 一 个 
实 参 ， 并 将 其 转换 为 数字 。 如 果 指 足 的 实 参 无 法 转换 为 数 
字 ，Number 将 返回 NaN， 


来 检查 一 下 你 的 类 型 转换 知识 吧 。 对 于 下 面 的 表达 式 ， 在 劳 边 的 空白 处 写 出 其 结果 。 
我 们 已 经 完成 了 一 个 。 请 查看 本 章 末 尾 的 答案 ， 


再 接着 往 下 阅读 。 


Infinity - "1" 


nA 


2 十 


99 + 101 


1 1" 


console.log("Result: 


+ 42 


" + 10/2) 


“4242 


"1 1" 


wr 1" 


3 + " bananas "+21+" apples" 
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对 象 相 等 







还 有 一 点 没有 讨论 ， 那 就 是 对 象 的 
相等 性 。 例 如 ， 两 企 对 象 相 等 意味 着 
什么 呢 ? 







很 高 兴 你 想到 了 这 一 点 。 说 到 对 象 相 等 性 ， 可 从 
简单 的 角度 考虑 ， 也 可 从 复杂 的 角度 考虑 。 从 简单 
的 角度 考虑 时 ， 它 指 的 是 这 个 对 象 与 那个 对 象 是 否 
相等 ， 即 如 果 有 两 个 指向 对 象 的 变量 ， 它 们 指向 的 
是 同一 个 对 象 吗 ? 这 将 在 下 一 页 讨论 。 从 复杂 的 角 
度 考虑 时 ， 将 涉及 对 象 的 类 型 ， 即 如 何 判断 两 个 对 
象 的 类 型 相同 。 你 知道 ， 可 创建 看 起 来 是 相同 类 型 
的 对 象 ， 如 两 个 汽车 对 象 ， 但 如 何 判断 它们 的 类 型 
) 确实 相同 呢 ? 这 个 问题 很 重要 ， 将 在 本 书后 面 讨论 。 
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如 何 判 断 两 个 对 象 是 否 相 等 


你 可 能 会 上 回 : 该 使 用 == 还 是 === 呢 ”好 消息 是 ， 比 较 两 个 对 象 时 ， 使 用 哪 
个 运算 符 都 没有 关系 换 句 话说 ， 如 果 两 个 操作 数 都 是 对 象 ， 可 使 用 ==， 
也 可 使 用 ===， I 相同 。 检 查 两 个 
对 象 是 人 否 相 等 时 ， 情 况 如 下 : 


检查 两 企 对 象 变量 是 否 相 等 时 ， 比较 的 是 指 





向 对 象 的 引用 隐 
别 忘 了 ， 对 象 变量 存储 的 是 指向 对 象 的 引用 ， 因 此 比较 两 个 对 、 
象 变量 时 ， 实 际 上 比较 的 是 指 同 对象 的 5 上 用 。 与 这 个 引用 不 相 条 
它们 是 两 个 不 同 的 
if (varl === var2) { 引用 ， 
// 哇 ， 它 们 是 同一 个 对 和 象 | 
} 这 里 情况 并 非 如 六 





此 ! 


Var1 ~ & var2 
请 注意 ， 这 些 对 象 包含 什么 


不 重要。 只 要 两 个 引用 指向 
的 对 象 不 同 ， 它 们 就 不 相等 。 


仅 当 两 企 别 周 指 息 的 是 同一 个 对 象 时 ， 它 们 
才 相 守 

检查 两 个 包含 对 象 引 用 的 变量 是 否 相 等 时 ， 仅 当 它 们 指 

癌 同 一 个 对 象 才 会 返回 true。 


if (varl === var3) 1 f 
// 哇 ， 它 们 是 同一 个 对 象 | 加 (_ 


\ 
两 个 对 象 引 用 相等 。 一 一 





var3 varl 


与 这 个 引用 相等 。 它 们 指 
一 个 对 象 ， 因 此 相等 。 
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相等 的 练习 


隆 笔 上 阵 


晤 





下 面 的 代码 用 于 在 Earl 停车 场 寻 找 汽 车 ， 请 据 此 与 出 loc1 到 loc4 的 值 。 


function findCarInLot(car) { 
for (var i = 0; i < lot.length; I++) { 
if (car === lot[i]) { 


return i; 


} 


return -1l1:; 


Var chevy = { 
make: "Chevy", 
model: "Bel Air" 

}; 

var taxi = { 
make: "Webville Motors", 
model: "Taxi" 

}; 

var fiatl = { 
make: "Fiat", 
model: "500" 

}; 

var fiat2 = { 
make: "Fiat", 
model: "500" 


}; 在 这 里 写 出 你 的 答案 。 


Earl 停 车 场 的 


var lot = [chevy, taxi, fiatl, fiat2]; 


Var locl = findCarIinLot(fiat2); 
Var loc2 = findCarInLot(taxi); 

var loc3 = findCarIinLot(chevy); 
Var loc4 = findCarInLot (fiatl); 
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真 值 就 援 在 嘟 里 


没 错 ， 说 的 就 是 真 值 (truthy) ， 而 不 是 真相 。 我 们 还 将 谈 到 假 值 
(falsey 或 falsy) 。 我 们 到 底 要 说 什么 呢 ? 在 有 些 语言 中 ，true 
和 false 的 定义 非常 严格 ， 但 JavaScript 没 那么 严格 。 事 实 上 ， 
JavaScript 对 true 和 false 的 定义 比较 宽松 。 怎 么 个 宽松 法 呢 ? 在 
JavaScript 中 ， 有 些 值 并 非 true 或 false， 但 用 于 条 件 表 达 式 中 时 ， 
被 视 为 true 或 false。 我 们 将 这 些 值 称 为 真 值 和 假 值 ， 因 为 严格 
地 说 它们 并 非 true 或 false,， 但 用 于 条 件 表达 式 上 时， 它们 的 行为 像 


tf 


理解 真 值 和 假 值 的 秘诀 如 下 : 知道 哪些 值 是 假 值 后 ， 就 可 将 其 他 值 
就 视 为 真 值 。 来 看 一 些 在 条 件 表达 式 中 使 用 假 值 的 示例 : 








ee 全 一 一 这 个 条 件 测试 有 点 怪 ， 其 中 的 变量 为 undefined。 
0 这 可 行 吗 ? 这 是 有 效 的 JavaScript 条 件 表达 式 
// 执行 某 种 操作 og? (答案 是 肯定 的 ) 。 


} 


var element = document.getElementById("elementThatDoesntExist"); 
if (element) { 


// 执行 某 种 操作 Ps element 的 值 为 null。 这 是 要 做 什么 呀 ? 
} 
if (0) { 

// 执行 另 一 种 操作 Us 检查 0 是 否 为 true? 
} 


将 一 个 空空 等 


| 全 子 付 串 用 于 条 件 测试 。 
2 人民 前 捕 铺 结 条 虽 ? 
if (™™) { 


// 这 些 代码 会 被 执行 吗 ? 你 猜 猜 。 


} 
一 一 全 现在 要 在 布尔 条 件 中 使 用 NaN? 
那么 结果 会 是 什么 呢 ? 
if (NaN) 1 
// 在 布尔 测试 中 使 用 NaN 的 结果 会 是 什么 呢 ? 
} 
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真 值 和 假 值 


JavaQceript 将 哪些 值 祝 为 假 值 


再 次 重申 ， 要 知道 哪些 值 是 真 值 ， 哪 些 值 症 假 值 ， 只 需 知 道 哪 
些 值 是 假 值 ， 余 下 的 其 他 所 有 值 就 都 是 真 值 。 


在 JavaScript 中 ， 假 值 有 5 个 : 妥 纪 住 啤 些 值 是 上 真 慎 ， 
undefined 啤 些 值 是 假 值 ， 只 和 需 纪 
null 位 5 个 像 值 ， undefined 、 
0 null、 0、““” 和 NaN， 
其 他 的 值 都 龙 真 值 





因此 ， 前 一 页 的 每 个 条 件 测 试 都 为 false。 前 面 说 过 ， 
除 假 值 外 的 其 他 值 都 是 真 值 (当然 ， 不 包括 false) 。 下 
面 是 一 些 真 值 示例 : 


Vas 这 是 一 个 数组 。 它 不 是 undefined、null、O、 
或 NaN， 因 此 结果 必然 为 true。 
if ([]) { 
// 将 执行 这 些 代 码 





} 


Var element = document.getElementById("elementThatDoesExist"); 


-helemeat) | So 人 它 不 是 假 
// 将 执行 这 些 代码 值 ， 因 此 必然 为 真 值 。 


} 
0 


有 数字 O 是 假 值 ， 其 他 数字 都 是 真 值 。 
if (1) { 


// 将 执行 这 些 代码 
} 


var string = "mercy me'": 
If (string) { 
// 还 将 执行 这 些 代码 
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隆 笔 上 阵 


KC 





该 来 用 用 测度 仪 了 。 判 断 哪些 值 是 真 值 ， 哪 些 值 是 假 值 ， 找 出 犯罪 嫌疑 人 撤 了 
多 少 次 说， 进而 判断 指控 的 罪名 是 售 成 立 。 然 后 ， 查 看 本 章 末 尾 的 答案 ， 绸 接 
着 往 下 阅读 。 当 然 ， 你 也 可 以 在 浏览 豆 中 关 试 这 些 测试 。 


function lieDetectorTest() { 
Var lies = 0; 


var stolenDiamond = { }); 

if (stolenDiamond) { 
console.log("You stole the diamond"); 
liestt+t; 

} 

var car = { 
keysInPocket: null 

}; 

if (car.keysInPocket) { 
console.log("Uh oh, guess you stole the car!"); 
liestt; 

} 

if (car.emptyGasTank) { 
console.log("You drove the car after you stole it!"); 
liestt; 

} 

var foundYouAtTheCrimeScene = [ ]; 

if (foundYouAtTheCrimeScene) { 
console.log("A sure sign of guilt"); 
liestt; 

} 

If (foundYouAtTheCrimeScene[0]) { 
console.log("Caught with a stolen item!"); 
liestt+t; 

W 个 只 包含 一 个 空格 的 字符 串 。 

var yourName = ” 

if (yourName) { 
console.log("Guess you lied about your name"); 
liestt+t; 

} 

return lies; 

} 

Var numberOfLies = lieDetectorTest(); 
console.log("You told " + numberOfLies + " lies!"); 
if (numberOfLies >= 3) { 

console.log("Guilty as charged"); 
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ge 


这 些 代码 有 什么 怪异 的 地 方 吗 ? 


var text = "YOU SHOULD NEVER SHOUT WHEN TYPING"; 


Var presentableText = text.toLowerCase(); 
if (presentableText.length > 0) { 
alert(presentableText); 


字符 串 的 物 秘 生活 


每 种 类 
类 型 
们 有 
这 些 


看 下 


型 都 归属 于 两 个 阵营 之 一 : 要 么 是 基本 类 型 ， 要 么 是 对 象 。 基 本 
的 生活 非常 简单 ， 而 对 象 记 录 了 状态 ， 还 拥有 行为 ( 换 句 话说， 它 
属性 和 方法 ) 。 


说 法 都 没 错 ， 但 并 不 是 故事 的 全 部 。 事 实 上 ， 字 符 串 比较 神秘 ， 请 
面 的 代码 : 
人 ”这 好 像 是 一 个 正常 的 字符 串 。 


Var emot = "XOxxOO"; 


var hugs = 0; 


var kisses = i 对 字符 串 调用 方法 ? 


emot = emot.trim(); 字符 串 还 有 属性 ? 


emot = emot.toUpperCase(); 


for(var i = 0; i < emot.length ; I++) { 


If (emot.charAt(i) === "X") { 

hugstt; 下 一 还 有 其 他 方法 ? 
} else if (emot.charAt(i) == "0O") { 

kissest+; 





你 认为 这 些 代码 是 做 什么 的 ?根据 你 的 基本 类 型 知识 ， 你 党 得 


狗 如 
电视 剧 


为 什么 字符 串 始 像 基 本 类 型 
又 像 对 象 


字符 串 是 如 何 表 现 得 既 像 基本 类 型 又 像 对 象 的 呢 ? 因为 JavaScript 提 供 了 
这 样 的 支持 。 换 名 话说 ， 在 JavaScript 中 ， 可 创建 作为 基本 类 型 的 字符 
串 ， 也 可 创建 作为 对 人 象 的 字符 串 〈 支 持 大 量 的 字符 串 操 作 方 法 ) 。 本 书 
前 面 从 未 谈 及 如 何 创建 作为 对 象 的 字符 串 ， 在 大 多 数 情况 下 ， 你 无 需 显 
式 地 这 样 做 ， 因 为 JavaScript 解 释 堪 会 在 需要 时 蔡 你 创建 字符 串 对 象 。 


JavaScript 解 释 合 会 在 什么 情况 下 这 样 做 呢 ? 它 为 什么 这 样 做 呢 ? 来 看 看 
字符 串 的 生活 : 








O 


创建 三 个 基本 类 型 字符 串 ， 
量 
var:name = "Jenny"; : 


y 并 将 它们 赋 给 变 


(SS 


ee 
eeae seeseesese es es s se se es se ss es es ee ss ss ee sse es ss as ee ss ss ee es ee ae es 


类 型 、 相 等 、 转 换 等 


将 一 些 基本 类 型 字符 串 拼 


接 起 来 ， 生 成 另 一 个 基本 


var :SongName =:Phone :+:"/":+ :name; 


ee 


var index = indexOf("-—"); 


if (Eact|substring(10, 15) === "prime") { 


rt NN 
} > 同样 ， 字 符 串 人 3ct 被 暂时 


转换 为 对 象 ， 以 古村 方 、 
再 次 使 用 字符 串 eh 支持 方法 
fact， 但 这 次 不 需要 
对 象 ， 因 此 它 恢复 为 


基本 类 型 字符 串 。 


调用 一 个 方法 。 此 时 ，JavaScript 在 
幕后 将 phone 暂 时 转换 为 字符 串 对 象 。 
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关于 字符 串 的 问题 







[9): 我 想 确 认 一 下 ， 需 要 跟踪 字符 
串 何 时 是 基本 类 型 、 何 时 是 对 象 吗 ? 


AAA ， 

w= sa 大 多 数 情况 下 不 需要 ，JavaScript 
解释 器 会 为 你 处 理 所 有 的 转换 。 你 
管 编写 代码 ,假定 字 符 串 支持 属性 和 
方法 ,一 切 都 将 按期 望 的 进行 


人 

(5); JavaScript 为 何 支持 字符 串 既 
可 作为 基本 类 型 ， 又 可 作为 对 象 呢 ? 
A . 

只 ”。 你 这 样 想 想 吧 : 只 执行 基本 的 
字符 串 操 作 时 ， 如 比较 、 拼 接 、 
DOM 等 ， 可 获得 将 字符 串 作 为 基本 类 
型 的 效率 ; 但 需要 做 更 复杂 的 字符 串 
处 理 时 ， 也 有 现成 的 字符 串 对 象 可 用 。 
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这 看 起 来 非常 令 人 迷惑 。 字 符 串 
不 断 地 在 基本 类 型 和 对 象 之 闽 转 换 ? 
该 如 何 跟 踪 字 符 串 是 基本 类 型 还 是 对 
象 呢 ? 


你 不 
中 包 










要 这 样 做 。 





全 大 量 帮助 操作 其 文本 的 方法 。JavaScript 会 负责 
有 的 细节 。 因 此 ， 你 可 以 这 样 想 : 
有 更 深入 的 认识 ,但 在 日 常 编码 工作 中 ， 
来 做 正确 的 事情 ( 它 不 会 训 负 你 的 厚望 





祭 


中 


2 
9) ;给 定 任意 一 个 字符 串 ， 如 何 关 
断 它 是 对 象 还 是 基本 类 型 ? 


AAA ， 

号 除非 以 特殊 的 方式 (使 用 本 书 
后 面 将 讨论 的 对 象 构造 函数 ) 创建 ， 
否则 字符 囊 都 是 基本 类 型 。 可 随时 使 
用 运算 符 typeof 来 判断 一 个 变量 是 字 
符 囊 还 是 对 象 。 


》 
加 )】 ;其他 基本 类 型 也 可 以 像 对 象 一 
样 吗 ? 


A 


每 关 和 数字 和 布尔 值 也 可 以 像 


它们 不 像 字 符 串 那样 有 
上 么 多 属性 ， ee 串 那 样 

经 第 将 它们 用 作对 象 。 别 总 了 ， 转 换 
部 是 在 莱 后 自动 A 因此 你 真 的 
不 用 考虑 那么 多 ; 只 管 在 需要 时 使 用 
属性 ， ee ee 处 理 临 时 转换 
就 是 了 。 


对 象 一 样 ， 


一 般 而 言 》 将 字 符 串 视 为 对 象 就 好 ， 其 > 


站 


你 对 JavaScript 幕 后 的 情 ; 


完全 依赖 J ns 


- 


》 
人 ] ;如 何 了 解 字符 串 对 象 的 所 有 方 
法 和 属性 ? 


Ap ， 
只 ” ， 这 是 优秀 文档 的 用 武之 地 。 有 
很 多 很 有 用 的 在 线 文 档 ， 如 果 你 更 喜 
欢 看 书 ， 可 参阅 《JavaScript 权 威 指 


南 》， 其 中 介绍 了 JavaScript 字 符 串 的 
每 个 属性 和 方法 。 你 还 可 以 在 网 上 进 
行 搜索 。 
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mm kA : ” 
几 句 打气 的 话 : 我 们 原本 可 以 专 屏 一 各 ， 
上 一 ~ 详细 介绍 字符 囊 支 持 的 每 个 方法 和 局 。 
旁 虑 到 我 们 正在 讨论 字符 串 ， 而 你 刚 得 知 字符 串 也 支持 方法 0 果 这 样 做 ， 本 书 将 长 达 2000 页 ， 量 一 


“ 面 就 暂停 对 类 型 的 讨 i 请 多 直 ， 但 当前 这 对 你 来 说 并 非 必 不 
下 面 就 暂停 对 类 型 的 讨论 ， 介 绍 一 些 你 可 能 用 到 的 和 常见 字符 串 集 松 守 ， 你 已 掌 手 了 方法 和 对 象 的 基本 











方法 。 有 几 个 字符 串 方 法 经 常 要 用 到 ， 值 得 花 时 间 来 了 解 它 们 ， 0 识 ， 如 果 你 真 的 想 深 入 了 解 字符 串 公 
现在 就 开始 吧 。 电 的 细节 ， 只 需 找 一 部 优秀 的 参考 指南 
即 可 。 









属性 lendtp 


尾 性 1ength 指 出 了 字符 串 包 含 多 少 个 字符 ， 为 迭代 字符 串 中 的 字符 提供 了 极 大 的 全 
利 。 使 用 属性 length 来 挝 代 


入 人 中 人 


字符 串 中 的 每 个 字 侍 。 






var input = "jenny@wickedlysmart.com; 



















for(var i = 0; i < input.length; i++) { 
if (input.charAt(i) === "@") { 


console.log("There's an 人 sign at index ”十 工 ) 7 


} 


a JavaScript 控 制 全 
运 charAt 获 取 字 符 串 中 
指定 索引 处 的 字符 ， There's an @ sign at index 5 





| 方法 charAt 


方法 charAt 将 一 个 整数 作为 参数 (这 个 参数 必须 在 0 和 字符 串 长 度 减 1 之 间 ) ， 并 返回 一 
个 字符 串 ， 其 中 包含 指定 位 置 处 的 字符 。 可 以 认为 字符 串 有 点 像 数组 ， 其 中 每 个 字符 都 有 
对 应 的 索引 ， 而 索引 从 0 开始 (与 数组 一 样 ) 。 如 果 指 定 的 索引 大 于 或 等 于 字符 串 的 长 度 ， 
这 个 方法 将 返回 一 个 空 字符 串 。 


( 请 注意 ， JavaScript 设 有 字符 类 型 3 四 Dige 四 


kk ~ 
因此 通过 返回 一 个 字符 串 来 返回 子 
1 其 中 只 包含 指定 的 字符 。 charAt(O) 记 Ce 
Oa 。 , 


-3 
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方法 indexOf 






方法 index0f 


这 个 方法 将 一 个 字符 串 作为 参数 ， 并 在 字符 串 中 该 参数 首次 出 现 的 位 置 返回 该 参数 中 第 


一 个 字符 的 索引 。 
I 对 其 调用 index0f 的 字 符 串 。 


var phrase = "the cat in the hat"; 


我 们 的 目标 是 找到 这 条 短语 中 的 第 一 
个 “cat 。 




















var index = phrase.indexOf("cat"); 


console.log("there's a cat sitting at index " + index); 


JavaScript 控 制 台 





返回 第 一 个 “cat” 中 字符 c 的 索引 。 
There's a cat sitting at index 4 







你 还 可 指定 第 二 个 参数 。 它 是 一 
引 ， 指定 从 什么 位 置 开 始 查找 。 


Index = Phrase.indexOf("the ， 5) 







console.log("there's a the sitting at index ”十 index); 







JavaScript 控 制 台 
由 于 指定 了 从 索引 5 开始 查找 ， 因 此 一 了 7 
忽略 了 第 一 个 “the”， 找 到 的 是 第 
二 个 “the”。 它 位 于 索引 11 处 。 


There's a the sitting at index 11 







index = phrase.indexOf ("dog"); 







console.log("there's a dog sitting at index " + index); 






请 > int 控 币 公 
请 注意 ， 如 果 没 有 找到 指定 JavaScript 控 制 台 
的 字符 串 ， 将 返回 索引 -1。 一 一 > ee 





类 型 、 相 等 、 转 换 等 





方法 Substring 


万 法 substring 将 两 个 索引 作为 参数 ， 提取 并 返回 这 两 个 索引 之 间 的 子 串 ， 


a 对 其 调用 substring 的 字符 串 。 


var data = "namelphoneladdress":; 


达 一 我们 想 要 返回 从 索引 5 到 索引 
var val = data.substring!(5, 10); 10 (不 包括 ) 的 子 串 。 











console.log("Substring Is " + val); 









我 们 获得 了 一 个 新 的 字符 串 ， 其 中 \ 
包括 从 索引 5 到 索引 10 的 字符 。 





JavaScripl 控 制 全 






Substring is phone 





你 可 以 省 略 第 二 个 参数 ， 在 这 种 情 


况 下 ， substring 将 提取 从 指定 索引 到 字符 
串 末 尾 的 子 串 。 












val = data.substring (5); 






JavaScripl 控 制 全 
console.log("Substring is now " + val); 






Substring is now phoneladdress 





方法 split 


这 马 符 将 字符 多 个 
将 一 个 用 作 分 隔 符 的 字符 作为 参数 ， 并 根据 这 个 分 隔 符 将 字符 串 分 成 
方法 split 将 一 1 l 










| 、 各 4 名 宁 和 守 串 
部 分 。 2 ph 根据 分 生 簿 格 字 4 
TT 。 I 个 部 分 ， 返 
= _ "name|Phoneladdress ， 分 成 多 人 癌 本 
var data 1ittnlm; 个 包含 这 些 部 分 的 * 
1 / 
var vals = data.sp 
了 A 1 ， 
console.log("Split array 1S vals) 





注意 到 这 里 向 console.log 传 说 了 两 JavaScript 控 制 合 
个 用 吝 号 分 阳 的 实 参 。 这 样 在 控制 
台 显 示 数 组 vals 前 ， 不 会 将 其 转换 
为 字符 串 。 








Split array is ["name", "phone", "address"] 






你 现在 的 位 置 ， 
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字符 串 方 法 


矢 英 谐 





toLowerCase 2 
将 它们 都 替换 为 
将 字符 吉 中 的 所 有 大 号] 全 冯 并 ey 
字符 都 转换 为 小 写 ， 并 replace 
返回 结果 。 
lastIndexOf 
乡 A 、 
山 陈 字符 串 的 一 部 分 人 Sindex0f 类 仪 ， 但 查 CA 本 
并 返回 结果 。 J 人 cat 
nn 
到 slice A co 
在 字符 串 中 查找 与 正则 表 将 字符 串 中 的 所 有 小 写 
达 式 匹配 的 子 串 。 字符 都 转换 为 大 写 ， 并 
返回 字符 串 的 一 一 部 分 。 退回 结果 。 
四 peczi i i 关 和 订 民 中。 Vy 














外 字符 ， 3 
Ns 大 的 全 和 


可 对 字符 串 执行 的 操作 非常 多 ， 和 
7 这 里 列 出 了 其 他 一 宇 万 法 ， 你 现在 只 需 
大 致 了 解 一 下 ， 等 真 的 需要 时 骨 去 了解 详情 。 


300 第 7 章 
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讼 椅 争 多 战 

(熟悉 类 型 可 能 改变 你 的 生活 ) 

有 一 家 软件 公司 要 求 两 位 程序 员 编 写实 现 指定 需求 的 代码 。 为 让 
他 们 尽快 交付 代码 ， 讨 厌 的 项 目 经 理 承诺 ， 谁 先 交 付 代 码 谁 就 将 
得 到 硅谷 人 手 一 把 的 Aeron 座 椅 。 公 司 的 台 柱 子 Brad 是 个 脚本 编 
写 高 手 ， 而 Larry 刚 大 学 毕业 ， 他 们 都 认为 这 是 小 菜 一 碟 。 


Larry 坐 在 小 隔 间 里 想 : 代码 必须 做 哪些 事情 呢 ? 需要 确认 字符 串 
足够 长 ， 需 要 确认 中 间 是 一 个 连 字 符 ， 还 需 确 认 其 他 所 有 字符 都 
是 数字 。 为 此 ， 可 使 用 属性 lengtn 来 获取 字符 串 的 长 度 ， 并 使 
用 方法 charAt 来 访问 每 个 字符 。 

与 此 同时 ，Brad 悠 困 地 哆 着 咖啡 并 盘算 着 : 代码 必须 做 哪些 事情 
呢 ? 他 首先 想到 的 是 ， 字 符 串 是 一 个 对 象 ， 有 很 多 方法 可 用 来 帮 
助 验 证 电话 号 码 。 我 得 研究 这 些 方 法 ， 志 速 将 程序 编写 出 来 。 毕 
竟 ， 对 象 束 是 对 象 。 

请 接着 往 下 看 ， 看 看 Brad 和 Larry 是 如 何 编写 程序 的 ， 并 找到 问题 aa 
的 答案 : 谁 得 到 了 Aeron 座 椅 ? Wl 

















在 Larry 的 小 隔 半 里 Aeron 座 椅 


Larry 开 始 使 用 字符 串 方 法 编写 代码 ， 很 快 他 就 写 由 了 下 面 的 代 
码 : 





function validate(phoneNumber) { _— Larry 使 用 属性 length 来 确定 字 
if (phoneNumber.length !== 8) { 符 串 包含 多 少 个 字符 。 
return false; 


} 
for (var i = 0; i < phoneNumber.length; i++) { 


if (i === 3) { iT 人， 他 使 用 方法 charAt 来 检查 字符 冲 中 国 守 
if (phoneNumber.charAt(i) !== '-') { | 子 付 。 
return false; Ro 首先 ， 他 确认 址 引 5 处 的 字符 
} 为 连 字 符 。 
else if (isNaN(phoneNumber.charAt(i 三 
) 字符 都 是 数字 。 
} 


return true; 


你 现在 的 位 置 ， 
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使 用 字符 串 


在 grad 的 小 隔 隐 里 


Brad 编 写 了 如 下 人 代码， 这些 代码 检查 第 一 部 分 和 第 二 部 分 走 
人 盏 是 数字 ， 还 检查 中 间 是 否 古 连 字 符 : 











Brad 开 头 的 做 法 与 Larry 类 似 。 


但 利用 了 自己 掌握 的 字 

符 串 方法 的 知识 。 网 

if (phoneNumber.length !== 8) { 他 使 用 方法 substring 创 建 一 个 字符 串 ， 
return false; 其 中 包含 索引 0 一 5 处 的 三 个 字符 。 


function validate(phoneNumber) { 


} 
var first = phoneNumber.substring(0,3); > 他 如 法 炮制 ， 再 创建 一 个 字符 串 ， 其 中 包含 
var second = phoneNumber.substring (4); 从 索引 4 开始 到 末尾 的 字符 。 


if (phoneNumber.charAt(3) !== "-" || isNaN(first) || isNaN(second)) { 


return false; 


接 下 来 ， 他 在 一 个 条 


} 件 表 达 式 中 检查 正确 总 用 目 动 类 型 
return true; 的 电话 号 码 必 须 满足 有 趣 的 是 ， 他 还 有 关 或 无 章 。 四 ioNaN 刊 断 
} 的 所 有 条 件 。 转换 将 字符 串 转 损 为 敬 子 ， 册 I 


让 人 \> 
得 到 的 是 否 是 数字 。 非 员 巧妙 ! 


项 目 经 理 说 : “ Larry， 严格 地 说 先 完 成 的 是 你 ， 因 为 Brad 化 了 一 些 时 OE 沙 你 的 
间 研 究 各 种 方法 的 用 法 ， 但 我 们 需要 轻微 地 修改 一 下 需求 。 对 你 们 两 个 脑力 
程序 员 高 手 来 说 ， 这 根本 不 是 问题 。” 















等 等 ， 你 认为 Brad 这 样 使 用 


Larry 知 道 这 不 过 是 漂亮 的 说 辞 ， 他 心里 想 ， “如果 每 次 听 到 这 句 话 就 
arry 知 道 这 不 过 是 法 亮 的 说 辞 ， 他 心里 如 果 每 次 昕 到 这 人 避 话 就 isNaN 是 否 可 能 引入 bug? 


能 得 到 一 毛 钱 ， 我 早 就 是 富 全 了 了。 可 Brad 看 起 来 非常 平静 ， 到 底 是 怎么 
回 事 呢 。”Larry 依 然 深 信 ，Brad 不 过 是 故 作 和 镇 定 罢了 ,下 一 轮 目 己 也 
将 先 编写 好 代码 ， 再 次 获胜 。 








类 型 、 相 等 


问 到 Larry 的 小 隔 的 


Larry 认 为 ， 原 来 的 大 部 分 代码 都 可 以 接着 用 ， 只 需 再 处 理 包 不 包含 
连 字 符 的 边界 情况 : 电话 号 码 要 么 只 包含 7 位 数字 ， 要 么 在 前 三 位 和 
后 四 位 之 间 还 有 一 个 连 字 符 。 很 快 ，Larry 就 添加 了 额外 的 逻辑 (并 
进行 简单 测试 以 确保 正确 无 误 ) : 











function validate(phoneNumber) { 
IE (phoneNumber.length >8 | 
phoneNumber.length < 7) { 
return false; 


} 
for (var i = 0; i < phoneNumber.length; i++) { 


If (i === 3) { 
if (phoneNumber.length === 8 && Larry 人 必须 添加 这 些 额 外 
phoneNumber.charAt(i) !== '-') { 的 远 辑 。 代 码 不 名， 但 
return false; 2 一 理解 起 来 有 点 难 。 
} else if (phoneNumber.length === 7 && 


isNaN(phoneNumber.charAt(i))) { 
return false; 


} 


} else if (isNaN(phoneNumber.charAt(i))) { 
return false; 


} 


return true; 


海 叭 上 ，grad 坐 在 笔记 本 电脑 前 


Brad 和 面市 人 微笑 ， 唱 着 玛 格 丽 塔 ， 很 快 就 完成 了 修改 。 为 获得 电话 号 码 的 
第 二 部 分 ， 他 将 电话 号 码 的 长 度 减 去 4， 得 到 第 二 部 分 的 起 始 索 引 (不 
再 假定 存在 一 个 连 字 符 ) ， 进 而 以 硬 编码 的 方式 指定 起 始 索引 。 这 差 不 
多 就 改 好 了 ， 只 是 还 需 重新 编写 检查 连 字 符 的 代码 ， 因 为 仅 当 电 话 号 码 
包含 8 个 字符 时 ， 才 需要 检查 连 字 符 。 





、 转 换 等 
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修改 的 数量 与 Larry 几 乎 相同 ， 但 
”Brad 的 代码 依然 更 容易 理解 。 


function validate(phoneNumber) { 
IE (phoneNumber.length >8 | 


> = 入 A DO. FrD 二 < 
phoneNumber.length < 7) { 为 获取 第 二 部 分 ，Brad 根 据 电话 号 码 的 长 


度 来 计算 起 始 索 引 。 


return false; 
} 
var first = phoneNumber.substring(0,3); 


var second = phoneNumber.substring(phoneNumber.length - 4); 


字 
if (isNaN(first) || isNaN(second)) { 检查 第 4 个 字符 是 否 是 连 字 
return false; 
} 
if (phoneNumber.length === 8) { 
return (phoneNumber.charAt(3) === "-"); 


} 


return true; 


人 返回 测试 条 件 的 结果 一 true 或 
false。 我 们 认为 Brad 的 代码 依然 存在 bug ， 
尔 能 找 出 来 吗 ? 





LarryttBrad 抢 先 一 步 进 入 项 目 经 理 的 办 公 室 


讨厌 的 项 目 经 理 说 ，“Brad， 你 的 代码 很 容易 理解 -7 堵 浸 你 的 
脑 


和 维护 ， 干 得 好 。”Larry 脸 上 得 意 的 笑容 消失 得 无 力 


影 无 踪 。 
不 过 ，Larry 也 不 用 太 担 心 ， 因 为 我 们 都 知道 ， 代 码 要 转 而 使 用 方法 split， 该 如 何 重 写 
Brad 的 代码 呢 ? 


漂亮 与 吾 并 非 唯一 的 注 虑 因素 。Brad 的 代码 需要 详 
尽 地 测试 ， 因 为 不 确定 它们 在 任何 情况 下 都 管用 。 
你 怎么 认为 呢 ? 你 认为 谁 该 得 到 Aeron 座 椅 呢 ? 












急死 我 了 ,到 底 准 得 到 了 座 椅 


二 楼 的 Amy。 


| | | ， 只 有 一 行 代 码 ! 有 关 这 些 代 
(大 家 都 不 知道 ， 项 目 经 理 将 需求 ( 码 的 工作 原理 ， 请 参阅 附录 | 


交 给 了 三 位 程序 员 。 ) 





function Validate (PhoneNumbeL) { 
[人 return phoneNumber.match(/^\d{3}-?\d{4}$/); 
这 是 Amy 编 写 的 人 ] 
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2 SP Uv 


Noe” 


FAUL 
2 
实名 ee a etn ta 发 现 了 这 门 语 
言 中 另外 一些 有 趣 的 地 方 。 在 突 验 过 程 中 ， 他 们 发 现 了 另 一 个 和 运算 符 
instanceof。 有 了 这 个 和 运算 符 ， 他 们 就 能 跻身 最 前 治 的 行列 。 请 穿 
上 实验 服 ， 戴 上 护 上 有 目镜 ， 看 看 你 能 和 否 帮 忆 破 解 下 面 的 JavaScript 代 码 
及 其 结果 。 请 注意 ， 这 些 绝对 是 本 书 到 目前 为 止 最 怪异 的 代码 。 





代码 如 下 。 请 阅读 、 运 行 


Ve 


人 一 一 好 怪异 。 有 点 像 函 数 ， 又 有 点 像 对 象 。 
function Duck(sound) { 
this.sound = sound; 
this.quack = function() {console.log(this.sound);} 


—A\ 
一 人 
4 
a 
jj 


} 
和，new， 以 前 没 见 过 。 估 计 是 新 建 一 
var toy = new Duck("quack quack"); 个 Duck， 并 将 其 同 给 变量 toy。 
toy.quack(); DP 走 起 来 像 对 象 ， 那 它 
就 是 对 象 。 下 面 来 验证 这 一 点 。 


console.log(typeof toy); 
console.log(toy instanceof Duck); 


JavaScript 控 制 合 


这 是 运算 符 instanceof。 


屁 的 答案 进行 比 对 。 这 


?两 章 后 将 全 面 介绍 。 你 


言 级 JavaScript 程 序 员 


务必 将 你 认为 的 输出 与 本 草 末 
各 代码 到 斌 是 什么 意思 呢 ? 
能 没有 意识 到 ， 
少 路 上 走 了 很 远 


你 已 经 在 通 往 高 
”我 可 没 开玩笑 | 


人 将 结果 写 在 这 里 。 有 什么 让 
你 感到 惊讶 的 地 方 吗 ? 





你 现在 的 位 置 ， 305 
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在 JavaScript 中 ， 类 型 分 两 组 基本 类 
型 和 对 象 。 不 属于 基本 类 型 的 值 都 是 
对 象 。 

基本 类 型 包括 数字 、 字 符 串 、 布 尔 
值 、null 和 undefined; 其 他 的 值 
都 是 对 象 。 


undefined 意 味 着 变量 (属性 或 数组 
元 素 ) 还 未 初始 化 。 


nul1 表 示 “ 无 对 象 ”。 


NaN 指 的 是 “ 非 数 字 ”， 但 更 准确 地 
说 ，NaN 指 的 是 在 JavaScript 中 无 法 表 
示 的 数字 。NaN 的 类 型 为 数字 。 


Na N 与 包括 它 自己 在 内 的 任何 值 都 
不 相等 ， 因 此 要 检查 一 个 值 是 否 是 
NaN， 应 使 用 函数 1sNaN。 

要 检查 两 个 值 是 否 相 等 ， 可 使 用 == 或 
如 果 两 个 操作 数 的 类 型 不 同 ， 相 等 运 
算 符 (==) 尝试 将 一 个 操作 数 转 换 为 
另 一 个 操作 数 的 类 型 ， 再 检查 它们 是 


人 否 相 等 。 


如 果 两 个 操作 数 的 类 型 不 同 ， 严 格 相 


等 运算 符 (===) 将 返回 false。 


要 避免 进行 类 型 转换 ， 可 使 用 ===， 
但 在 有 些 情况 下 ， 自 动 执 行 类 型 转换 
的 == 可 提供 极 大 的 便利 。 

其 他 运算 符 也 会 自动 执行 类 型 转换 ， 
如 算术 运算 符 和 字符 串 拼 接 运 算 符 。 
在 Javascript 中 总 共有 5 个 假 值 ， 
undefined、null、0、"“" ( 空 字 符 


串 ) 和 false; 其 他 值 都 是 真 值 。 

在 有 些 情况 下 ， 字 符 串 的 行为 像 对 
象 。 你 使 用 基本 类 型 字符 串 的 属性 或 
方法 时 ，JavaScript 将 把 它 暂时 转换 为 
对 象 ， 使 用 指定 的 属性 或 方法 ， 再 将 
其 转换 为 基本 类 型 字符 捉 。 这 是 在 幕 
后 自动 进行 的 ， 不 用 你 操心 。 

字符 串 有 很 多 执行 字符 串 操 作 的 方 
法 ， 

仅 当 两 个 变量 包含 的 对 象 引 用 指向 同 
一 个 对 象 时 ， 它 们 才 相 等 。 
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于 访 JavaScript 烷 党 游戏 


你 在 本 章 学 到 了 大 量 的 JavaScript 技 能 ， 请 完成 下 面 的 填 字 游戏 ， 以 充 
分 理解 这 些 知 识 。 答 案 都 可 在 本 章 找到 。 


模 回 


2. JavaScript 中 唯一 一 个 与 什么 都 不 相等 的 值 。 

5. Infinity 的 类 型 。 

7. JavaScript 中 有 多 少 个 假 值 。 

8. 谁 得 到 了 Aeron 座 椅 ? 

10. 仅 当 两 个 包含 对 象 引 用 的 变量 同 二 村 
象 时 ， 它 们 才 相 等 。 

12. 要 求 返 回 一 个 对 象 ， 但 没有 所 需 的 对 象 时 返回 的 
值 。 

13. 返回 一 个 数组 的 字符 串 方 法 。 

16. 密 办 里 州 的 一 个 城市 ， 温 度 始终 保持 在 19°C。 
17. JavaScript 规 旋 中 nu11 的 类 型 。 

18. 一 个 相等 运算 符 ， 仅 当 两 个 操作 数 的 类 型 和 值 都 
相同 时 才 返 回 true。 





纵向 

1. 一 个 用 来 确定 值 的 类 型 的 运算 符 。 

2. 世上 最 怪异 的 值 。 

3. 你 的 非 亚 特 停 在 哪个 停车 场 ? 

4. 字符 串 有 时 伪装 成 什么 ? 

6. 不 存在 的 属性 的 值 。 

9. 字符 串 有 很 多 可 用 于 操作 字符 串 的 什么 ? 
11. 将 两 个 运算 符 转 换 为 相同 的 类 型 ， 再 比较 它们 和 是 
否 相 等 的 运算 符 。 

直人 1 == Undefined 的 结 坟 ; 

15. 用 来 获取 字符 串 中 特定 索引 处 字符 的 方法 。 
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一 大 拨 JavaScript 值 乔装 打扮 ， 正 在 玩 一 个 “ 猪 狂 我 是 谁 ” 的 晚会 游 
戏 ， 其 中 还 混入 了 一 些 不 速 之 客 。 你 需要 根据 它们 对 自己 的 搞 述 猜测 








它们 的 身份 假设 它们 说 的 都 是 真 话 。 请 用 稍 头 将 每 条 摘 述 连接 到 
相应 的 参与 者 ， 我 们 已 经 猜 出 一 个 了 。 
答案 如 下 。 
参与 游戏 的 值 : 
我 是 没有 return 语 句 的 函数 返回 的 值 。 容 
空 对 象 


我 是 未 赋值 的 变量 的 值 。 
null 


我 是 稀疏 数组 中 不 存在 的 数组 元 素 的 值 。 一 一 一 一 一 一 一 芝 "defined 


NaN 
我 是 不 存在 的 属性 的 值 ， ee 

area 91 
我 是 已 删除 的 属性 的 值 ， 
我 是 创建 对 象 时 不 能 赋 给 属性 的 值 . 0 

0 
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在 突 验 富 ， 我 们 喜欢 和 将 东西 拆 开 ， 看 看 里 面 的 情况 ， 接 上 诊断 工具 
以 搞 清楚 到 底 出 了 什么 问题 。 今 天 ， 我 们 要 研究 的 是 JavaScript 的 类 
型 系统 ,而 我 们 已 经 找到 了 一 个 小 小 的 诊断 工具 typeof，,， 可 用 于 
检查 变量 。 清 你 穿 上 实验 服 ， 戴 上 护 上 有 目镜， 进入 实验 室 ， 与 我 们 一 


当成 里 o 


道 来 做 实验 吧 。 


tyPeof 是 一 个 内 置 的 JavaSceript 和 运算 符 ， 可 半 于 探测 共 操 作 数 (要 
对 其 进行 操作 的 东西 ) 的 类 型 ， 如 下 例 所 示 : 





Ny = 


运算 符 typeof 接 受 一 个 操作 数 ， 


Just a Pi 并 返回 该 操作 数 的 类 型 。 


var probe = typeof subject; 


var subject = 


— > 
广 一 这 里 的 类 型 是 string。 注 
意 到 typeof 使 用 字符 串 来 
表 不 类 型 ， 如 “string” 
boolean “number” 
“object”“undefined” 等 。 


console.log(probe); 


JavaScript 控 制 全 





String 


该 你 了 。 请 收集 下 述 实验 的 结果 。 





var testl1 = "abcdef"; 

var test2 = 123; JavaScript 控 制 全 
var test3 = true; 这 些 是 实验 数据 ， 人 

var test4 = {]}; A 而 汶 些 是 实验 | 

var test5 = []: 人 number 

var test6; 

var test7 = {"abcdef": 123}; boolean 

var test8 = ["abcdef", 123]; 


function test9(){return "abcdef"}; 


console.log(typeof test1); 
console.log(typeof test2); 

console.log(typeof test3); 
console.log(typeof test4); 
console.log(typeof test5); 
console.log(typeof test6); 
console.log(typeof test7); 
console.log(typeof test8); 
console.log(typeof test9); 














object 
object 
undefined 
object 
object 


function 


作 这 是 我 们 得 到 的 结果 。 
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练习 答案 


咬 呀 ,刚才 的 实验 数据 遗 泌 7 null。 下面 是 禾 汤 的 实验 : 


pr 
Var 七 estl10 = null; Javascfipt 控 制 全 


object 


console.log(typeof test10); 这 是 我 们 得 到 的 结果 。 











i 本 章 一 直 和 在 讨论 有 趣 的 值 ， 下 面 来 看 看 一 些 有 趣 的 行为 。 请 将 下 面 的 
给 习 代码 添加 到 一 个 基本 网 页 的 <script> 元 素 中 ， 再 加 载 该 网 页 ， 看 看 控 
答案 ，。。 制 全 显示 的 是 什么 。 为 什么 会 出 现 这 种 情况 呢 ? 你 能 猜 出 其 中 的 原因 
鸣 ? 
if (99 == "99") 1 JavaScript 控 制 全 
console.log("A number equals a string!'"); 


A number equals a string! 
} else { 


console.log("No way a number equals a string"); 


这 是 我 们 得 到 的 输出 。 
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对 于 下 面 的 比较 表达 式 ， 在 运算 符 == 和 === 下 方 分 别 写 出 它们 的 结 
"42" == 42 true false "42" === 42 
"0" == 0 true false "0" === 0 
"0" == false true false "0" === false 
"true" == true false false 七 rue === true 
true == (1 == "1") true false ^) true === (1 === "1") 
\ 难度 极 高 | 将 两 个 == 都 蔡 换 为 === 后 2 


结果 为 false。 


米 





答案 
下 面 是 对 一 些 运 算 符 的 描述 ， 你 能 将 它们 与 相应 的 运算 符 连 起 来 吗 ? 请 注意 ， 每 个 运算 符 
可 能 对 应 于 0、1 或 多 项 描述 。 答 案 如 下 。 








将 两 个 值 进行 比较 ， 看 它们 是 否 相等 。 它 被 
称 为 相等 运算 符 ， 必 要 时 会 对 操作 数 进行 类 
型 转换 ， 再 进行 比较 ， 


比较 两 个 对 象 将 两 个 值 进 行 比较 ， 看 它们 是 否 相 当 ， 如果 


时 ， 这 两 个 运 两 个 值 的 类 型 不 同 ， 将 直接 返回 false。 
算 符 都 行 | ~> 一 一 一 
给 变量 赋值 。 
没有 这 样 、 二 一 二 二 
的 运算 符 。 比较 两 个 对 象 引 用 ; 如 果 它 们 相同 ， 就 返 


回 true， 人 否则 返回 false。 
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练习 答案 


用 和 爷 上 阵 


Ap ri 
合 杀 





劳 


对 于 下 面 的 表达 式 ， 在 
答案 如 下 。 

Infinity - "1" 

"42" + 42 

2+"1 1" 

99 + 101 

"1" "1" 


console.log("Result: " + 10/2) 


3 + " bananas " + 2 + " apples" 


其 结 


一 < 一品 


边 的 空白 处 写 出 其 结果 。 我 们 已 经 完成 了 一 个 。 


“14” 被 转换 为 1， 和 看 
Infinity - 1 的 结果 为 


Infinity 
Infinityo 
“4242 
“21 1 99 
200 两 个 字符 串 都 被 苇 
O 结果 为 0。 


4 一 一 先 计算 10/2， 再 将 结 
果 转 换 为 字符 串 ， 并 
与 字符 串 “Result:” 
拼接 。 


“Result: 5 


“3 bananas 2 apples 


人 每 个 ;都 被 视 为 字符 串 拼 接 运 算 符 ， 
因为 至 少 有 一 个 操作 数 为 字符 串 。 


St 


function lieDetectorTest() { 


} 


降 
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乞 j 
分 


人 
4 


尝试 了 这 些 测试 吗 ? 


var lies = 0; _ 
对 人 象 是 真 值 ， 哪 怕 它 

i 是 空 对 象 

var stolenDiamond = { }; 工人 从 。 


if (stolenDiamond) { 
console.log("You stole the diamond"); 


liest+t; 
} 
ee 四 /关上 1 人 因为 属性 
: A— 犯罪 嫌疑 人 没 偷 车 ， 
ee keysinPocket 的 值 为 假 值 null。 


}; 
if (car.keysInPocket) { 
console.log("Uh oh, guess you stole the car!"); 


liestt+t; 
} ,一 一 犯罪 生 颖 人 也 设 有 将 车 开 走 ， 
if (car.emptyGasTank) { 四 为 属性 emptyGasTank 的 值 
console.log("You drove the car after you stole it!"); 为 假 值 undefined 
liest+t; 
} 
var foundYouAtTheCrimeScene = [ ]; 2 []( 空 孝 组 ) 为 真 值 ， 四 此 
if (foundYouAtTheCrimeScene) { 抑 罪 嫌疑 人 被 当场 抓 住 ， 
console.log("'A sure sign of guilt"); 
liestt+t; 


} 
if (foundYouAtTheCrimeScene[0]) { 


console.log("Caught with a stolen item!"); 


liestt+t; 
所 、 个 只 包含 一 个 空格 的 字符 串 。 
Var yourName = ™" 
if (yourName) { 
console.log("Guess you lied about your name"); 
ja ee JavaScript 控 制 全 
和 __ 任何 非 空 字符 串 都 是 真 值 ， 哪 忻 它 


只 包含 一 个 空格 ! 


这 个 数组 不 包含 任何 元 素 ， 因 此 索引 
“ 0 处 的 数组 元 素 为 假 值 undefined。 犯 
罪 嫌疑 人 肯定 将 赃物 成 起 来 了 。 





} 


You stole the di 
return lies; diamond 


A Sure sign of guilt 


var numberOfLies = lieDetectorTest(); Guess you lied about your name 
console.log("You told " + numberOfLies + " lies!"); You told 3 liesl 


if (numberOfLies >= 3) { 


ee 
console.log("Guilty as charged"); 到 ulty as charged 
犯罪 嫌疑 人 撒 了 5 次 谋 ， 因 此 我 们 认为 他 有 徘 。 


你 现在 的 位 置 ， 


该 来 用 用 测 详 仪 了 。 判 断 哪 些 值 是 真 什 ， 哪 些 值 是 假 什 ， 找 出 犯罪 嫌 颖 人 
撤 了 多 少 次 话 ， 进 而 判断 指控 的 罪名 是 售 成 立 。 答 案 如 下 。 你 在 浏览 尼 中 
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练习 答案 


特 上 阵 
命案 


RE 





function findCarInLot(car) { 


for (var i = 0; i < lot.length; I++) { 


if (car === lot[il]) f 


return i; 


} 


return -1l1:; 


Var chevy = { 
make: "Chevy", 
model: "Bel Air" 


var taxi = { 
make: "Webville Motors", 
model: "Taxi" 

}; 

var fiatl = { 
make: "Fiat", 
model: "500" 

}; 

var fiat2 = { 
make: "Fiat", 
model: "500" 


var lot = [chevy, taxi, fiatl, 


Var locl = findCarInLot(fiat2); 


var loc2 = findCarInLot(taxi); 


var loc3 = findCarIinLot(chevy); 


Var loc4 = findCarInLot(fiatl1); 


这 是 我 们 的 答 
fiat2]; i 
3 
1 
= 
Eee 


案 。 


下 下 面 的 代码 用 于 在 Earl 停车 场 寻找 汽车 ， 请 据 此 与 出 1oc1 到 loc4 的 值 。 


Earl 停车 场 的 
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Pilp 一 一 In 1 .生生 
浊 红 实 玫 区 案 
侨 验 人 员 继 续 使 肝 和 返 算 符 i 究 JavaScript， 发 现 了 这 门 语 


epi 在 实验 过 程 中 ， 他 们 发 现 了 另 一 个 运算 符 
instanceof。 有 了 这 个 运算 符 。 他 们 就 能 跻身 最 前 治 的 行列 。 请 穿 
上 实验 服 ， 戴 上 扩 日 镜 ， 丰硕 你 能 否 帮 忙 破解 下 面 的 JavaSceript 代 码 
及 其 结果 。 请 注意 ， 这 些 绝 对 是 本 书 到 目前 为 止 最 怪异 的 代码 。 





代码 如 下 。 请 阅读 、 运 行 、 修 改 它们 ， 
看 看 它们 是 做 什么 的 。 4 是 


上 一 一 好 性 = 有 点 像 函 数 ， 又 有 点 像 对 象 。 
function Duck(sound) { 
this.sound = sound; 
this.quack = function() {console.log(this.sound);} 


} 
“人 哇 ,，new， 以 前 没 见 过 。 估 计 是 新 建 一 个 Duck， 


var toy = new Duck("quack quack"); 并 将 其 赋 给 变量 toy。 


toy.quack(); 一 "5 走 起 来 像 对象 ， 那 它 就 是 对 


象 。 下 面 来 验证 这 一 点 
console.log(typeof toy); 这 和 只。 
console.log(toy instanceof Duck); 


JavaScript 控 制 合 
quack quack 人 一 toy 丈 像 是 对 象 …… 我 


面 介 绍 。 你 们 可 以 调用 它 的 方法 。 
程序 


这 是 运算 符 instanceof。 


思 呢 ?两 章 后 将 全 
你 在 通 往 高 级 JavaScript 


我 可 没 开玩笑 ! 


这 些 代码 到 底 是 什么 
己 经 可 能 没有 意识 到 
员 之 路 上 走 了 很 远 。 


object 《一 toy 的 类 型 为 对 象 。 


时 实 
true 二 一 一 总 之 ，toy 是 一 个 Duck 实 


例 。 


人 《这 是 我 们 得 到 的 结果 。 
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JavasScript 焙 年 游戏 管 案 


你 在 本 章 学 到 了 大 量 的 JavaScript 技 能 ， 请 完成 下 面 的 填 字 
游戏 ， 以 充分 理解 这 些 知 识 。 答 案 都 可 在 本 章 找到 。 答 案 
v0 





下 

国 

国 国 国 国 

到 a i 

T NDIEIE| 
A 


> | 


oa 


Ia 
| 


A N 


四 
型 
国 
加 
加 
zz 


他 | 于 


> > 
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+ 输 写 一 个 应 用 程序 * 


你 真 厉害 ， 将 各 种 食材 
挠 拌 在 一 起 ， 就 做 出 了 
美味 的 食物 。 















哩 1 有 睁 开眼 吧 ! 奶 
油 蛋 粮 来 了 。 





d 
.2 
Pg 于 油 


下 


系 上 工具 腰带 ， 就 是 那个 囊括 你 新 学 的 所 有 编码 技能 、DOM 知 识 其 
至 HIML 和 CSS 知 识 的 工具 腰带 。 本 章 将 结合 使 用 这 些 知 识 打 造 第 一 个 货 
真 价 实 的 Web 应 用 。 不 再 是 只 有 一 艘 战舰 和 一 行 藏身 之 地 的 小 儿科 游戏 ， 
本 章 将 提供 全 面 的 体验 : 又 大 又 漂亮 的 游戏 板 、 多 艘 战舰 、 获 取 用 户 输 
入 …… 这 些 都 包含 在 一 个 网 页 中 。 我 们 将 使 用 HTML 定 义 游戏 网 页 的 结 
构 ， 使 用 CSS 设 置 游 戏 的 视觉 样式 ， 并 使 用 JavaScript 代 码 定义 游戏 的 行 
为 。 坐 好 了 ， 我 们 将 全 力 以 赴 ， 将 油门 踩 到 底 ， 编 写 一 些 正式 的 代码 。 











打造 战舰 游戏 


编写 一 个 货真价实 的 战舰 游戏 


在 第 2 革 ， 你 从 零 开 始 ， 编 写 了 一 于 不 错 的 战舰 游戏 。 你 完全 可 以 因此 感觉 民 好 ， 
但 必须 承认 ， 这 于 游戏 有 所 小 儿科 : 它 能 够 正 第 运行 ， 玩 起 来 也 竣 合 ， 但 根本 无 法 
给 朋友 留 下 深刻 的 影响 ， 你 也 无 法 攒 它 来 融 得 第 一 轮 风 险 投 资 。 要 给 人 留 下 座 刻 影 
啊 ， 需 要 有 看 得 见 的 游戏 板 、 华 丽 的 战舰 ， 并 让 玩家 能 够 直接 在 游戏 中 输入 (而 不 
征 使 用 全 能 的 剖 览 右 对 话 框 ) 。 你 还 需 改 进 前 一 个 版 本 ， 使 其 支持 三 艘 战舰 。 


换 句 话说 ， 你 希望 游戏 界面 类 似 于 下 面 这 样 。 














玩家 开火 后 ， 在 
游戏 板 上 显示 是 
否 击 中 战舰 。 


赏心悦目 的 游戏 
板 和 网 格 。 


三 艘 战 秽 都 租 过 
了 你 的 射击 。 





直接 在 网 页 中 输入 猜测 
的 位 置 。 


脑力 请 暂时 忘记 JavaScript， 看 看 上 面 的 战舰 游戏 模型 。 你 将 如 何 使 用 HTML 


大 二 o 


和 CSS 创 建 这 个 网 页 的 结构 和 视觉 效果 ? 
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间 顾 休 ML 和 499 


获取 战舰 游戏 
要 创建 时 散 的 交互 式 网 页 (应 用 ) ， 需 要 使 用 三 种 技 工具 包 
术 : HTML、CSS 和 JavaScript。 你 知道 ，HTML 用 于 定义 结 a 。 . 
构 ，CSS 用 于 设置 样式 ， 而 JavaScript 用 于 定义 行为 。 不 再 纸 es 
上 谈 兵 ， 本 和 章 要 玩 真 的 了 。 虽 们 先 从 HTML 和 CSS 着 手 。 
我 们 的 第 一 个 目标 是 创建 前 一 页 所 示 的 游戏 板 。 不 仅 如 此 ， 工具 包括 


我 们 还 需 正 确 地 设计 其 结构 ， 以 便 能 够 在 JavaScript 中 获取 

玩家 输入 以 及 显示 击 中 、 未 击 中 等 消息 。 

为 此 ， 我 们 将 把 网 页 的 背景 设置 为 一 幅 图 像 ， 以 显示 网 格 和 poardjpg 
雷达 扫描 图 案 。 然 后 在 背景 图 像 上 放置 一 个 HTML 表 格 ， 以 

便 显 示 战 舰 等 内 容 。 我 们 还 将 使 用 一 个 HTML 表 单 米 获取 玩 




















家 输入 。 , 

zhppng “lai aes 

7 
miss.png 
然后 ， 在 网 格 上 面 添 

我 们 将 网 页 背景 加 一 个 HTML 表 格 。 Se 
设置 为 一 幅 描 绘 过 | a eat 
游戏 网 格 的 图 像 。 jpg、ship.png 和 miss.png。board. 


jpg 是 主 背 景 图 像 ， 用 于 显示 市 网 格 
的 游戏 板 。ship.png 是 一 幅 小 战舰 图 
像 ， 将 被 放置 到 游戏 板 上 ; 注意 到 它 
是 一 幅 部 分 透明 的 PNG 图 像 ， 这 样 
可 直接 将 其 放 在 背景 图 像 上 面 。 最 
后 ， 图 像 miss.png 也 将 被 直接 放 在 游 
戏 板 上 面 。 在 这 个 游戏 中 ， 玩 家 击 中 
战舰 时 ， 我 们 将 在 相应 的 位 置 显示 战 
舰 图 像 ， 而 未 击 中 时 ， 就 显示 MISS 
图 像 。 


SS 


这 样 就 可 以 在 需要 时 将 战舰 或 MIl55 
3 和 
图 像 放 到 单元 格 中 。 a Mhttp:! jwickedlyomart.com me 
下 载 这 个 游戏 需要 的 所 有 下 。 


下 面 就 来 开发 这 个 游戏 。 我 们 将 先 退 一 步 ， 花 几 页 的 篇 幅 
编写 重要 的 HTML 和 CSS; 完成 这 些 工作 后 ， 就 可 以 开始 
编写 JavaScript 代 码 了 。 
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规划 游戏 的 HTML 


创建 HTML 页 面 : 大 致 轮 廊 


下 面 是 创建 HTML 页 面 的 进攻 计划 。 

我 们 在 背景 中 放置 一 幅 图 
像 ， 让 游戏 界面 拥有 正在 
进行 雷达 扫描 的 效果 。 


4 


背景 上 面 是 一 个 
HTML 表 格 ， 它 创建 
的 游戏 板 指 定 了 战 租 
所 处 的 范围 。 


供 玩 办 输入 区 
/一 家 输 的 HTML 
表单 。 


沉 和 首先， 我 们 将 专注 于 游戏 的 月 景 ， 包 丘 将 至 
景 设置 为 黑色 ， 并 在 网 页 中 添加 雷达 网 格 图 
像 。 





个 接 下 来 ， 我 们 创建 一 个 HTML 表 格 ， 并 
将 其 放 在 背景 图 像 上 面 。 这 个 表格 中 的 
每 个 单元 格 都 对 应 于 游戏 板 的 一 个 格子 。 





5 然后 ， 我 们 将 添加 一 个 HTML 表 元 素 ， 
让 玩家 能 够 输入 其 猜测 ， 如 A4。 我 们 
还 将 添加 一 个 消息 区 域 ， 用 于 显示 诸 
如 You sank my battleship! 等 消息 。 





人 最 后 ， 我 们 将 决定 如 何 使 用 表格 在 游 


戏 板 上 显示 战舰 图 像 ( 击 中 时 ) 和 Tai。 信人 内 在 顺 旦 叶 交 
MISS 图 像 (未 击 中 时 ) 。 和 女 尼 三 名 假 放 直到 去 


MINS 


第 1 步 : 基本 人 ML 


咱们 开始 吧 ! 首先 需要 一 个 HTML 页 面 。 我 们 
将 创建 一 个 简单 的 HTML5 页 面 ， 并 使 用 样式 
指定 背景 图 像 。 在 这 个 网 页 中 ， 我 们 将 添加 
一 <xBOdy> 亲 > 此 中 内包 全 一 <diN3 元 





素 。 这 个 <div> 元 素 将 用 于 放置 游戏 网 格 。 : 觉得 知识 有 点 不 够 用 2 
请 看 下 一 页 ， 其 中 的 网 页 包含 基本 的 HTML 和 : 如 末 你 觉得 自己 的 HTML 和 
CSS CSS 知 识 有 点 不 够 用 ， 请 参 


阅 与 本 书 配套 的 《Head 


First 
有 ITML 与 CSS》 


SR 
08。 ee e 
Seem ee e 
Geaanenesananee 5 草 
Gaaanaeanene ee 。。，。， 
WN 
WN 
ae 
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<!dqoctyPe html> 和 个 普通 的 HTML 页 @@。 


<htmlL lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Battleship</title> 
<style> 
body { (我 们 要 将 网 页 的 背景 设置 为 黑色 。 


background-color: black; 


} 我 们 要 让 游戏 板 位 于 网 页 中 央 ， 因此 将 
width (游戏 板 的 宽度 ) 设置 为 1024 像 


并 将 in (外 边 距 ) 设置 为 auto。 
div#board ({ 素 ， 并 将 margin 


position: relative; 


Po Up 将 <div> 元 素 “board 的 背景 设置 为 
Be 图 像 poard,jpg， 从 而 将 该 图 像 讨 加 到 
margin: auto; 网 页 中 。 我 们 对 这 个 cdiv> 元 素 进行 
background: url("board.jpg") no-repeat.; 相对 定位 ， 以 便 相 对 于 这 个 <div> 对 
} 下 一 步 添 加 的 表格 进行 定位 。 
Sy 我 们 将 在 这 个 <div> 元 到 
</head> 中 添加 表示 游戏 板 的 网 
一 人 
<body> 烙 以 及 用 于 获取 玩 冢 办 
<div id="board"> 入 的 表单 。 
</div> ~、 
<script src="battleship.js"></script> 我 Di 人 码 放 在 广 Tbabileshbp)s ps 
</body> 因此 要 先 为 此 创建 一 个 空 自 文件 。 
</html> 
em = 个 
“9 — © 
zxV 蕊 在 文件 中 输入 上 述 代 码 ， 并 将 其 保存 为 battleship.html (也 可 从 本 书 配套 


网 站 http://wickedlysmart.com/hfjs 下 载 所 有 的 代码 ) ， 再 在 浏览 器 中 加 
载 这 个 网 页 。 下 面 是 我 们 的 测试 情况 。 


当前 ， 这 个 网 页 类 似 于 
这 样 。 





你 现在 的 位 置 ， 321 


创建 游戏 的 HTML 


第 2 步 : 创建 表格 


接 下 来 需要 创建 表格 。 这 个 表格 履 盖 背景 图 像 中 的 网 格 ， 并 提供 了 显示 击 中 和 未 击 
中 图 像 的 区 域 。 每 个 单元 格 〈 即 每 个 <td> 元 素 ) 都 正好 在 背景 图 像 中 的 一 个 格子 上 
面 。 这 里 的 诀 窒 是 ， 给 每 个 单元 格 都 指定 一 个 1d， 以 便 能 够 在 CSS 和 JavaScript 中 操 
作 它 。 来 看 看 如 何 创建 这 些 id 并 添加 定义 表格 的 HTML。 














网 格 的 每 个 格子 
都 对 应 于 表格 中 


每 个 id 都 指出 了 单元 格 在 网 的 一 个 ctd> 元 豆 。 


格 中 的 位 置 ， 因 此 左上 角 
的 单元 格 的 id 为 00， 而 石 
下 角 的 单元 格 的 id 为 66。 





这 个 单元 格 的 id 为 06。 
这 个 单元 格 的 id 为 66。 
下 面 是 定义 这 个 表格 的 HTML， 请 将 它们 添加 到 <div> 标 签 之 间 : 


<div id="board"> £4A— 我 们 将 表格 典 套 在 <div> 元 素 board 内 。 


<table> 
<tr> 


<td id="00"></td><td id="01"></td><td id="02"></td><td id="03"> 


</td><td id="04"></td> <td id="05"></td><td id="06"></td> 
</tr> 
< 之 


文 个 游戏 中 ， 行 用 字母 (A、B、 C 等 ) 
但 指定 id 时 ， 我 们 将 字母 替换 为 
相应 的 数字 (0O、1、 2 等 ) 。 因 此 ， 第 
1 行 的 行 号 为 0 (对 应 于 字母 A) ， 而 最 
后 一 行 的 行 号 为 6 (对 应 于 字母 6) 。 


确保 每 个 <td> 元 素 的 id 者 


是 正确 的 ， 对 应 于 在 网 格 
中 的 行 和 列 。 


<td id="10"></td><td id="11"></td><td id="12"></td><td id="13"></td> 


<td id="14"></td> <td id="15"></td><td id="16"></td> 


A 为 节省 篇 幅 ， 种 略 了 几 行 ， 但 我 
RE 们 深信 你 能 补 全 它们 。 
<tr> 


<td id="60"></td><td id="61"></td><td id="62"></td><td id="63"></td> 


<td id="64"></td><td id="65"></td><td id="66"></td> 
</tr> 
</table> 
</div> 


第 9 步 ， 与 玩家 交互 


现在 需要 一 个 让 玩家 能 够 输入 猜测 位 置 (如 A0 或 E4) 的 HTML 元 素 ， 还 需要 一 
个 用 于 癌 玩 家 显示 消息 (如 You sank my battleship!) 的 元 素 。 我 们 将 使 用 一 个 
<form> 和 一 个 <ijnput> 元 素来 让 玩家 能 够 输入 猜测 位 置 ， 并 使 用 一 个 <div> 元 
素来 提供 疝 玩 家 显示 消息 的 区 域 。 








玩家 击 沉 战舰 后 ， 
我 们 将 在 左上 角 显 
示 一 条 消息 ， 吉 
知 玩家 这 一 点 。 





- 
玩家 可 在 这 里 输入 
其 猜测 的 位 置 。 





<div id="board"> 2 在 代码 中 ， 将 使 用 <div> 元 索 


二 . messageArea 米 炙 示 消息 
<div id="messageArea"></div> 9 米 显 示 消 息 。 


<table> 
</table> 
SForm> 议 个 <form> 元 素 包 含 两 个 <input> 
<input type="text" id="guessInput'" placeholder="A0"> 元 素 ， 其 中 一 个 用 于 输入 猜测 的 
忆 > _ 人 人 所 
<input type="button" id="fireButton" value="Fire!"> 位 置 (类 型 为 text) ， 全 | 
</form> 个 蓉 钮 。 注 意 到 给 这 些 元 素 指定 
orm 
1 3 了 id， 后 面 编写 代码 来 获取 玩家 的 
</div> \ 主 、 三 。 、 
请 注意 ，<div> 元 素 messageArea、<table> 元 素 和 <form> 猜测 时 将 用 到 它们 。 
元 素 都 出 套 在 <div> 元 素 board 中 ，。 这 对 下 一 页 的 CSS 来 
说 很 重要 。 
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为 游戏 添加 CSS 


再 添加 一 些 梓 式 


如 采 你 现在 加 载 这 个 网 页 (去 试 试 ) ， 大 多 数 元 素 的 位 置 
和 尺寸 都 不 对 。 因 此 ， 我 们 需要 编写 一 些 CSS， 让 所 有 的 
元 素 都 处 于 正确 的 位 置 ， 并 确保 所 有 元 素 (如 单元 格 ) 的 
尺寸 都 与 游戏 板 图 像 匹 配 。 


为 让 每 个 元 素 都 处 于 正确 的 位 置 ， 我 们 将 使 用 CSS 来 给 它 
们 定位 。 我 们 已 经 以 相对 方式 定位 了 人 <div> 元 素 board,， 
此 可 以 指定 消息 区 域 、 表 格 和 表单 在 <div> 元 素 board 内 
的 具体 位 置 ， 让 它们 出 现在 我 们 希望 的 地 方 。 


首先 来 指定 <div> 元 素 messageArea 的 位 置 。 它 藤 套 在 
<div> 元 素 board 内 ， 我 们 希望 它 位 于 游戏 板 的 左上 和 角 : 








body { 
background-color: black; 

<div> 元 素 board 的 定位 方式 是 相 

div#board { 区 对 的 ， 因 此 能 以 相对 于 该 <div> 
position: relative; 元 素 的 方式 定位 它 岩 套 的 所 有 
width: 1024px:; 元 素 。 


height: 863px; 

margin: auto; 

background: url("board.jpg") no-repeat; 
} 


div#i#messageArea { 


position: absolute; 二 我 们 将 请 息 区 域 定 
位 到 游戏 板 的 左 


top: Opx; 
上 角 。 


left: Opx; 
color: rgb(83, 175, 19); 


~ <div> 元 素 messadeArea 瞬 套 在 <div> 元 素 board 中 ， 
因此 以 相对 于 <div> 元 素 board 的 方式 指定 其 位 置 。 
它 将 位 于 这 样 的 位 置 离 <div> 元 素 poard 的 上 边 
缘 和 左边 缘 都 为 Opx。 
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我 们 想 把 消息 区 域 放 在 游戏 要 





position: relative 按 正常 
的 网 页 排版 方式 定位 元 素 。 


position: absolute 基 于 父 


元 素 位 置 定位 元 素 。 


可 使 用 属性 top 和 left 来 指定 
元 素 相 对 于 默认 位 置 偏 离 多 少 
像 订 。 





我 们 也 可 以 使 用 绝对 定位 方式 指定 表格 和 表单 在 <div> 元 素 boargd 中 的 位 
置 ， 从 而 将 这 些 元 素 准 确 地 放置 到 所 需 的 位 置 。 下 面 列 出 了 所 需 的 CSS : 


body { 
background-color: black; 
} 
div#board { 
position: relative; 
width: 1024px; 
height: 863px; 
margin: auto; 
background: uril("board.jpg'") no-repeat; 
} 
Qiv#messageArea { 
position: absolute; 


综合 应 用 


top: Opx; 
left: Opx; 
lor: > 、 
color: rgb(83, 175, 19) 训 关 戏 板 的 左边 缘 和 上 这 
} 、 | 元 豆 离 游 双 
pl 让 <table> 像 表 从 而 确保 
cp Ee 一 缘分 别 为 173 像 素 和 98 深 ， 
position: absolute; 之 与 背景 图 像 中 的 网 格 对 并。 
left: 173px; 
top: 98Px:; 
border-spacing: Opx; 
s 每 个 <td> 元 素 的 宽度 和 高 度 都 指定 为 
将 每 个 <td> 本 由 
ta { 人 一 特定 的 值 ， 让 表格 单元 格 与 网 格 单元 格 
width: 94px; 对 齐 。 
height: 94px; 
EY 二 > 夕 
} 将 <form> 元 素 放 在 游戏 板 的 右 下 角 。 这 让 
全 汪汪 人 进 信 右 下 角 数 字 的 一 小 部 分 ， 但 玩家 依 
兴 此 小 空 是 什 和 没有 关系 。 我 
Position: absolute; 知道 这 些 数字 是 什么 ， 人 使 
们 还 将 <form> 元 素 设 置 为 误 员 绿色 ， 
bottom: Opx; ee 
其 匹配 背景 图 像 。 
right: Opx; 
Padding: 1l5px; 
background-color: rgb(83, 175, 19); 
1 
忽 jy 2 A = 一 2 、 
form input { si 最 后 ， 稍微 设置 一 下 两 个 <input> 元 素 的 样 
一 “让 大 一 日 = 
background-color: rgb(152, 207, 113); 式 ， 使 其 与 游戏 的 主题 匹配。 就 这 些 1 
border-color: rgb(83, 175, 19); 
font-size: lem; 
} 











-| 
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对 是 否 击 中 使 用 CSS 


再 来 测试 一 下 这 球 游 戏 。 将 所 有 的 HTML 和 CSS 代 码 都 输入 到 你 的 HTML 文 
件 中 ， 再 在 浏 贤 王 中 加 载 这 个 页 面 ， 你 应 看 到 如 下 界面 。 


表格 位 于 网 格 的 上 面 ， 但 你 看 
不 到 它 (因为 它 是 不 可 见 的 ) 。 


尔 可 以 在 表单 中 输入 猜测 了 ， 
但 在 编写 Java5cript 代 码 前 
游戏 不 会 有 任何 反应 





第 4 步 : 指出 是否 oldie 


游戏 板 韭 第 漂亮 ， 但 还 需 在 玩家 每 次 猜测 后 指出 是 否 击 中 了 战舰 ， 即 在 游戏 
a 就 目前 而 言 ， 我 们 只 芳 虑 如 何 编 
写 所 需 的 标记 或 样式 ， 后 面 将 在 代码 中 使 用 同样 的 技巧 。 


那么 ， 如 何在 游戏 板 中 显示 图 像 ship.png 或 miss.png 呢 ?一 种 简单 的 方法 是 ， 
使 用 CSS 将 <td> 元 素 的 背景 设置 为 合适 的 图 像 。 为 此 ， ee 
miss 类 ， 并 在 这 两 个 类 中 将 CSS 属 性 backgrounad 设 置 为 相应 的 图 像 。 
样 ， 使 用 hit 类 设置 元 素 的 样式 时 ， | png， ie 
设置 元 素 的 样式 时 ， 其 背景 将 为 图 像 miss.png。 这 两 个 类 类 似 于 下 面 这 样 : 








如 果 元 素 归 属于 hit 类 ， 其 背景 将 为 图 像 5hip.png; 如 果 


hit 1 [元素 归属 于 miss 类 ， 其 背景 将 为 图 像 miss.png。 


background: url("ship.png'") no-repeat center center; 人 
} 


.miss 1{ 


background: url("miss.png'") no-repeat center center; 
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ship.png 


~MISS 


miss.png 


这 两 条 C55 规 则 
都 在 元 素 内 居中 
放置 一 幅 图 像 。 


使 用 hit 和 miss 类 


请 务必 将 hit 和 mi ss 类 的 定义 添加 到 你 的 CSS 中 。 你 可 能 纳 癌 ， 如 
何 使 用 这 些 类 呢 ?” 下 面 通 过 一 个 小 实验 来 演示 这 一 点 : 假设 有 艘 战 
舰 隐 藏 在 单元 格 B3、B4 和 B5 处 ， 而 玩家 猿 测 的 位 置 为 B3， 这 将 击 
中 战舰 ! 因此 你 需要 在 B3 处 显示 图 像 sShip.png。 为 此 ， 你 首先 将 B 
转换 为 数字 1 (因为 A 对 应 于 0，B 对 应 于 1， 依 此 类 推 ) ， 进 而 找到 
表格 中 id 为 13 的 <td> 元 素 。 接 下 来 ， 将 该 <td> 元 素 的 class 属 性 
设置 为 hit， 如 下 所 示 : 











将 <td> 元 素 的 属性 class 设 置 为 hit。 


<tr> SA 


<td id="10"></td> <td id="11"></td> <td id="12"></td> <td id="13" class="hit"></td> 
<td id="14"></td> <td id="15"></td> <td id="16"></td> 、 5 、 网 
从 务必 在 你 的 C55 中 添加 前 


</tr> 一 页 的 hit 和 miss 类 。 





现在 重新 加 载 网 页 时 ， 你 将 在 游戏 板 的 B3 格 子 内 看 到 战舰 图 像 。 本 
将 id 为 135 的 <td> 元 素 eg 
属性 设置 为 ht 后 看 到 的 结 款 。 


在 编写 代码 在 游戏 板 上 指出 是 否 击 中 了 战舰 前 ， 再 来 做 一 些 练习 ， 以 明白 CSs 的 工作 原理 。 
假设 玩家 作出 如 下 猜测 ， 请 你 在 标记 中 手动 添加 hit 或 miss 类 。 请 务必 与 本 章 末尾 的 答案 
进行 对 比 ! 

别 忘 了 ， 需要 将 字 世 


, 换 为 数字 (A 对 应 二 
战舰 1: A6, B6, C6 转 5 对 应 于 6) 


战舰 2: C4，D4， 卫 4 
战舰 3: B0，B1L，B2 





O 


完成 这 个 练习 后 ， 将 你 给 
<td> 元 素 添 加 的 class 属 性 


玩家 的 猜测 如 下 : 删除 ， 确 保 编写 代码 时 游 
A0, D4, F5, B2, C5, C6 戏 极 是 空 的 。 


请 查看 本 章 林 尾 的 答案 ， 再 接着 往 下 阅读 。 
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天 于 游戏 的 问题 


没 


》 
[5) s 在 我 们 的 表格 中 ， 将 id 特性 设置 
成 了 数字 ， 这 行 吗 ? 


As 。 My N ~ 
只 "。 没 问题 。 在 HTML5 中 ， 可 将 数字 
用 作 元 素 id。 只 要 id 值 不 包 念 空格 就 没 问 
题 。 就 这 个 战舰 游戏 而 言 ， 将 每 个 id 都 
设置 为 数字 非常 合适 。 这 可 以 跟踪 表格 
中 的 每 个 位 置 ， 让 我 们 能 够 快速 而 轻松 
地 访问 相应 的 元 素 。 


人 ) ， 对 于 游戏 板 中 的 每 个 单元 格 ， 我 
们 都 使 用 一 个 <td> 元 素来 表示 ， 并 通过 
属性 class 来 指出 玩家 是 否 击 中 了 战舰 。 
我 这 样 理解 对 吗 ? 

A 

只 ” ， 没 错 。 界面 由 几 部 分 组 成 : 为 吸 
引 眼 球 ， 使 用 了 一 个 显示 网 格 的 背景 图 
像 ， 在 背景 图 像 上 面 ， 放 置 了 一 个 透明 
的 HTML 网 格 ， 并 在 需要 时 使 用 hit 或 
miss 类 将 单元 格 的 背景 设置 为 一 幅 图 
像 。 单 元 格 背景 设置 都 是 在 代码 中 完成 
的 : 动态 地 设置 元 素 的 class 特 性 。 


上] :我 们 好 像 需要 将 字母 转换 为 数字 ， 
例如 将 A6 转 换 为 06。JavaScript 会 自动 
蔡 我 们 完成 这 项 工作 吗 ? 

HA ， 

吟 ' ， 不 会 ， 我 们 必须 自己 做 ， 但 有 一 
种 简单 的 方式 : 利用 你 的 数组 知识 快速 
进行 转换 。 效 请 期 待 。 


>》 
只 ， 我 不 确定 自己 完全 明日 了 CSS 定 
位 的 工作 原理 。 


个 " ， 定 位 让 你 能 够 指定 元 素 的 准确 位 
置 。 以 相对 万 式 足 位 时 ， 将 基于 网 页 的 
正常 排版 方式 来 定位 元 素 ; 以 绝对 方式 
定位 时 ， 元 素 将 在 最 近 的 已 定位 祖先 元 
素 内 处 于 特定 的 位 置 。 有 时 候 ， 要 对 整 
个 页 面 进行 绝对 定位 。 在 这 种 情况 下 ， 
可 指定 它 相 对 于 Web 浏 览 器 左上 角 的 位 
置 。 在 这 个 战舰 游戏 中 ， 我 们 以 绝对 方 
式 定 位 表格 和 消息 区 域 ， 但 参考 点 为 游 
戏 板 的 左上 角 ， 因 为 对 表格 和 消息 区 域 
来 说 ， 游 戏 板 是 最 近 的 已 定位 祖先 元 素 。 
如 果 你 要 更 深入 地 复习 CSS 定 位 ， 请 参 
阅 《Head First HTMEL 与 CSS》 的 第 11 章 。 


y 
(9) : 学 习 HTML 元 素 <form> 时 ， 我 
得 知 它 有 一 个 提交 表单 的 action 特 性 。 
我 们 为 何 没有 使 用 它 ? 


A 

Ww s 我 们 不 需要 设置 <form> 的 
action 特 性 ， 因 为 不 需要 将 表单 提交 
给 服务 器 竟 应 用 程序 。 在 这 个 游戏 中 ， 
我 们 将 使 用 代码 在 浏览 器 中 完成 所 有 处 
理 。 因 此 ,我 们 不 提交 表单 ， 而 为 表单 
按钮 实现 一 个 单 击 事 件 处 理 程序 ， 其 中 
的 代码 将 处 理 一 切 ， 和 包括 从 表单 获取 用 
户 输 入 。 请 注意 ， 需 要 将 表单 数据 提交 
给 服务 器 上 运行 的 PHP 程 序 或 其 他 程序 
时 ， 表 单 按 钮 的 类 型 为 submit， 但 我 们 
的 表单 按钮 的 类 型 为 button。 这 个 问题 
问 得 好 ， 本 章 后 面 将 更 深入 地 寺 论 。 


多 空 


人 


-小 号 


9 瑟 ry 于 vip 由 
如 何 设 计 近 款 咏 网 
编写 好 HTML 和 CSS 后 ， 玉 看 看 如 何 设 计 这 款 游 戏 。 第 2 革 编 写 战 舰 游 戏 的 第 一 个 版 本 时 ， 还 未 
学 习 畏 数 、 对 象 和 封装 ， 也 未 学 习 面 向 对 象 设 计 ， 因 为 我 们 采用 了 过 程 型 设计 ， 即 将 游戏 设计 
为 一 系列 包含 决策 逻辑 和 迭代 的 步 又 。 那 时 你 也 设 有 学 习 DOM， 因 此 第 一 个 版 本 的 交互 性 不 大 
强 。 这 次 ， 我 们 将 把 这 款 游 戏 设计 为 一 系列 各 司 其 职 的 对 象 ， 并 利用 DOM 来 与 用 户 交 互 。 你 将 
发 现 ， 这 种 设计 让 问题 理解 起 来 容易 得 多 。 
首先 来 介绍 一 下 要 设计 并 实现 的 对 象 ， 总 共有 3 个 : model、view 和 controller。model 将 存 
储 游 戏 的 状态 ， 如 每 艘 战舰 的 位 置 以 及 哪个 部 位 被 击 中 ;view 负 责 更 新 界面 ; contrzolletr 将 
各 个 部 分 整合 起 来 ， 用 于 处 理 用 户 输入 、 实 现 游戏 逻辑 并 判断 游戏 是 否 结束 。 














我 将 各 个 部 分 整合 起 来 : 获 
取 玩 家 的 输入 以 及 实现 游戏 
逻辑 。 


















我 的 任务 是 更 新 界面 : 
指出 玩家 是 否 击 中 了 战 
舰 以 及 向 册 户 显示 消息 。 















我 的 任务 是 跟踪 战舰 : 在 
付 径 地方、 是 否 补 击 中 以 
及 是 否 被 击 沉 。 






你 现在 的 位 置 ， 


必用 
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创建 视图 的 练习 





和 二 来 做 一 些 对象 设 计 工 作 吧 。 我 们 将 从 view 对 象 着 手 。 前 面 说 过 ，view 

:和 习 对 象 负责 更 新 视图 。 根 据 下 面 的 视图 ， 你 能 确定 view 对 象 需要 实现 哪些 
方法 吗 ?请 在 下 面 写 出 这 些 方法 的 声明 (这 里 只 考虑 声明 ， 方 法 体 的 代 
码 稍 后 再 考虑 ) ， 并 使 用 一 两 条 注释 指出 每 个 方法 的 功能 。 我 们 为 你 编 
写 了 一 个 方法 的 声明 。 继 续 往 下 阅读 前 ， 务 必 查 看 本 章 未 尾 的 答案 。 


eee Bartleship 
所 CG 省 站 localhost/-Beth/HFIS/chapter8/battleship.htm 


中 
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这 是 一 条 消息 。 消 息 为 “HIT! “You 


missed. “Yousankmy battleship! 
等 。 
在 网 格 中 显示 
MIS5 图 像 。 


在 网 格 中 显示 战舰 图 像 。 





< 一 、 定 义 一 个 对 象 ， 并 将 其 赋 给 变量 view。 


Var view = { 
// 这 个 方法 将 一 个 字符 串 作 为 参数 ， 并 在 消息 区 域 中 显示 它 


displayMessage: function(msg) { 


// 稍 后 将 编写 的 代码 


和 在 这 里 声明 你 认为 需要 提供 
的 方法 | 
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sp Fh vy3 如 果 你 没有 这 样 做 ， 我 真 替 你 险 
VILewWy 这 
和 关 现 vie 旬 红 。 现 在 就 去 看 看 | 


如 采 你 查看 了 前 一 个 练习 的 答案 ， 就 知道 我 们 在 view 对 象 中 定义 
了 三 个 方法 : displayMessage. displayHit 和 displayMiss。 
这 绝 非 唯一 正确 的 答案 。 例 如 ， 也 可 只 定义 displayMessage 和 
displayPplayerGues8 两 个 方法 ; 站 dieplavplayerCuese 
接受 一 个 指出 玩家 是 否 猜 对 了 的 参数 。 这 样 的 设计 也 无 可 挑 
别 。 这 里 继续 以 我 们 的 设计 为 例 ， 看 看 如 何 实 现 第 一 个 方法 一 一 
displayMessage: 


三 view 对 象 


var view = { 
displayMessage: function(msg) { 


< 我们 将 从 这 里 着 手 。 








}, 
displayHit: function(location) { 


}, 


displayMiss: function(location) { 


} 
by 


displayMessage 的 工作 原理 


为 实现 方法 displayMessage， 请 再 看 一 眼 HTML。 你 
将 发 现 其 中 有 一 个 用 于 显示 消息 的 <div> 元 素 ， 其 id 为 


messageArea: 


<div id="board"> > 


<div id="messageArea"></div> 


AAA Battteship 








</div> 


我 们 将 使 用 DOM 来 获取 这 个 <q iv> 元 素 ， 再 使 用 
innerHTML 来 设置 其 文本 。 别 忘 了 ， 每 当 你 修改 DOM 
时 ， 所 作 的 修改 将 立即 在 训 览 左 中 反映 出 来 。 
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思考 对 象 设计 


稀 现 displayMessage 







等 等 ， 在 没有 获取 玩 守 输入 的 情况 
下 ,怎么 可 能 实现 view 对 象 呢 ? 


这 是 对 象 的 一 大 优点 : 可 在 不 考虑 程序 的 其 他 任何 
细节 的 情况 下 ， 确 保 对 象 履 行 其 职责 。 在 这 里 ， 视 
图 只 需 知 道 如 何 更 新 消息 区 域 以 及 如 何在 网 格 上 
放置 击 中 和 未 击 中 标记 。 正 确 地 实现 了 这 些 行为 
后 ，view 对 和 象 就 编写 好 了 ， 可 以 接着 处 理 程序 的 
其 他 部 分 。 

面向 对 象 设计 的 另 一 个 优点 是 ， 可 独立 地 测试 视 
图 ， 确 保 它 能 够 正确 地 和 运行。 同时 测试 程序 的 多 个 
方面 时 ， 出 现 问 题 的 可 能 性 更 大 ， 找 出 问题 的 难 
度 也 更 高 (因为 要 找 出 问题 ， 必 须 研究 更 多 的 代 
码 ) : 

要 在 程序 的 其 他 部 分 还 未 完成 的 情况 下 测试 独立 的 
对 象 ， 需 要 编写 一 些 最 后 将 被 丢弃 的 测试 代码 ， 但 
这 没有 关系 。 

下 面 来 实现 并 测试 view 对 象 ， 接 着 处 理 程序 的 其 他 


部 分 ! 














虽 们 来 编写 aispLlayMessade 的 代码 。 前 面 说 过 ， 它 需要 : 


使 用 DOM 来 获取 id 为 messageArea 的 元 素 ; 


将 这 个 元 素 的 jnnerHTMI 设 置 为 传 入 的 消息 。 





新 建 一 个 文件 ， 将 其 命名 为 battleship.js， 并 在 其 中 添加 如 下 view 对 象 。 


三 接 
| 法 displayMessage 
Var View = { it 总 一 个 全 数 一 meg， 


displayMessage: function(msg) { 
var messageArea a= document. wa 0 Ne 
messageArea.innerHTIML = msg; 
}, 人 一 将 元 素 messageArea 的 innerHTML 设 置 为 ，。 
displayHit: Eunction(LIocation) { 以 更 新 该 元 素 的 文本 四 
}, 
displayMiss: function(location) { 
} 
}; 





下 面 接着 编写 其 他 两 个 方法 ， 再 对 这 些 代码 进行 测试 。 这 些 方法 
不 大 复杂 ， 我 们 可 同时 测试 整个 对 象 。 


displayHit 和 displayMiss 的 工作 腺 理 


前 面 说 过 ， 要 在 游戏 板 上 显示 图 像 ， 需 要 获取 一 个 <td> 元 素 ， 并 将 其 ee 
\ i , 5 、 ， 又 
class 特 性 设置 为 hit 或 miss。 将 clLass 特 性 设置 为 hit 时 ， 将 在 单 可 将 <td> 元 素 的 cla5s 了 


z 响 其 外 观 ， 现 
元 格 中 显示 图 像 ship.png; 而 设置 为 niss 时 ， 将 在 单元 格 中 显示 图 像 ed 
miss.png。 


<tr> 7 


<td id="10"></td> <td class="hit" id="11"></td> <td id="12"></td> ... 
</tr> 





在 代码 中 ， 我 们 将 使 用 DOM 来 获取 一 个 <ta> 元 素 ， 再 使 用 一 : 
element 对 象 的 方法 setAttribute 将 class 特 性 设置 为 ee PP 
hit 或 miss。 设 置 class 特 性 后 ， 相 应 的 图 像 将 立即 出 现在 
训 贤 三 中 。 我 们 需要 完成 的 工作 如 下 。 


昌 ”获取 一 个 由 两 个 数字 组 成 的 字符 串 id， 它 指出 了 要 
将 哪个 单元 格 的 class 特 性 设置 为 hit 或 miss。 
@ 使 用 DOM 来 获取 id 为 指定 值 的 元 素 。 


@ 在 qispblayHit 方 法 中 ， 将 该 元 素 的 class 特 性 设 
置 为 hit; 在 方法 displayMiss 中 ， 将 该 元 素 的 id 
设置 为 miss。 
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网 


实现 视 医 


实现 displayHit 和 displayMiss 

方法 aisplayHit 和 aisplayMiss 都 将 一 个 射击 位 置 作为 参数 ， 这 个 位 置 必须 是 表 
示 游戏 板 HTML 表 格 的 单元 格 (<ta> 元 素 ) 之 一 的 id。 因 此 ， 我 们 首先 需要 做 的 是 
使 用 方法 getElementByIdq 获 取 指 向 这 个 元 素 的 引用 。 在 方法 displayHit 中 学 试 


这 样 做 : 
忘 了 ，location 是 根据 行 号 和 列 吾 


displayHit: function(location) { 行 号 
生成 的 ， 它 是 一 个 <td> 元 素 的 id。 





var cell = document.getElementById(location); 


}， 
下 一 步 是 将 单元 格 的 class 特 性 设置 为 nit， 为 此 可 像 下 面 这 样 使 用 方法 setAttripute: 


displayHit: function(location) { 


Var cell = document.getElementById(location); 
"hit"); 接 下 来 ， 我 们 将 这 个 <td> 元 素 的 class 特 


cell.setAttribute("class", 
} 性 设置 为 hit。 这 将 立即 在 这 个 元 素 中 显 
未 战舰 图 像 。 


现在 将 这 些 代 码 加 入 到 view 对 和 象 中 ， 并 编写 方法 displayMiss: 


Var view = { 


displayMessage: function(msg) { 


Var messageArea = document.getElementById("messageArea"); 


messageArea.innerHTIML = msg; 


a 使 用 根据 玩家 猜测 生成 的 id 
来 获取 要 更 新 的 元 素 。 


displayHit: function(location) { 
var cell = document.getElementById(location); 


cell.setAttribute("class", "hit"); 然后 将 这 攻 、 元 素 的 
7 : BYclass 
}, 特性 设置 为 hit。 


displayMiss: function(location) { 
var cell = document.getElementById(location); 
cell.setAttribute("class", "miss"); 
} 在 displayMiss 中 如 法 炮制 ， 但 将 class 特 
八 __ 一 性 设置 为 miss， 在 元 素 中 显示 MI5 图 像 





请 将 方法 displayHit 和 displayMiss 的 代码 都 添加 到 你 的 文件 battleship.js 中 。 


S = 
再 次 试 妇 
处 理 程序 的 其 他 部 分 前 ， 咀 们 来 测试 一 下 这 些 代 码 : 使 用 代码 实 
现 前 面 “ 实 弹 演 习 ” 中 的 猜测 ， 看 看 结 末 如 何 。 我 们 要 实现 的 猜 


My 
My 
济 如 下: 
AL 
[ 笑 弹 演习 
在 编写 代码 在 游戏 板 上 指出 是 否 
了 - 是 否 击 中 了 战舰 前 ， 再 来 做 _ 此 只 
六 人 下 家 作出 如 下 猜测 ， 请 你 在 标记 中 手动 汪 加 1 找 此 练习 ， 以 明和 C55 的 工作 原理 ， 
| 进行 对 比 ! hit 或 miss 类 。 请 务必 与 本 章 未 尾 的 符 
A A A A A 让 末尾 的 答案 
人 Ds 一 








个 小 战舰 1: AR6，B6，c6 换 为 数字 (A 对 应 于 
战舰 2: ca, pa, Ea a 
未 击 中 未 击 中 击 中 人 
~ 未 击 中 、 玩家 的 猜测 如 下 ep 
请 查看 本 章 未 尾 的 答案 ， 再 接着 往 下 阅读 本 








为 了 在 代码 中 表示 这 些 猜测 ， 请 在 你 的 JavaScript 文 件 
battleship.js 末 尾 添加 如 下 代码 : 
A0” 区 AN 


view OrSpLayMiss( 00 ) D4” 别 所 了， displayHit 和 displayMiss 将 一 个 游戏 
view.displayHit("34"); 板 中 的 位 置 作为 参数 。 这 个 参数 对 应 于 一 人 
view.displayMiss("55"); €—'F5” 单元 格 的 4， 它 是 这 样 得 到 的 : 将 一 OA 
view.displayHit("12"); 。_ “po2， 和 一 个 数字 转换 为 由 两 个 数字 组 成 的 字符 串 。 


view.displayMiss("25"); 
view.displayHit("26"); ~ C5 


NR GE” 
“yy 人、 -一 唱和 雍 
中 外 、 别 产子 测试 一 下 方法 dd 这 个 测试 很 简单 ， 使 用 
另 绿 和 别 忘 了 宙 试 下 方法 displayMessage: 任何 消 息 都 可 以 。 


view.displayMessagel("Tap tap, is this thing on?"); 





添加 这 些 代码 后 ， 在 麟 览 絮 中 重新 加 载 网 页 ， 看 看 视图 有 何 变 化 。 


将 代 癌 组 织 为 对 we i 少 忆 证 EE 
和 象 并 小 每 个 对 象 示 在 视图 的 左上 角 。 
只 头 碍 一 项 职责 

的 好 处 点 一 是 ， 使 用 view 对 象 显示 的 战 靓 图 一 
可 分 别 对 每 个 对 ”92 和 代位 于 游戏 板 中 ， 

和 象 进 行 测试 ， 确 

你 它 能 正确 地 党 请 核实 每 幅 图 像 都 显示 

成 有 自 己 的 任务 在 正确 的 单元 格 中 。\、 > 
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规划 模型 


模型 

view 对 象 编写 好 后 ， 接 着 来 处 理 模 型 。 模 型 用 于 存储 游戏 的 状态 ， 通 季 还 包含 一 些 有 
关 如 何 修改 状态 的 逻辑 。 在 这 个 游戏 中 ， 状 态 包括 战舰 的 位 置 、 战 舰 的 哪些 部 位 被 击 中 
以 及 有 多 少 艘 战舰 已 被 击 沉 。 就 日 前 而 言 ， 需 要 实现 的 唯一 逻辑 是 : 判断 玩家 是 否 击 中 
了 战舰 ， 如 果 击 中 了 ， 将 战舰 的 相应 部 位 标记 为 被 击 中 。 

下 面 说 明了 modqe1 对 象 是 什么 样 的 。 








boardSize: 游戏 板 网 格 的 大 小 。 
sd 的 前 
numships， 游戏 包含 的 战舰 数 。 2 ee 







上 和 所 处 的 位 置 以 及 被 机 中 
一 的 部 位 。 

shipsSunk: 有 多 少 艘 战舰 已 被 

击 沉 。 

shipLength : 每 艘 战舰 占据 多 少 


、 个 单元 格 。 
fire: 一 个 处 理 玩家 向 战舰 开火 的 方法 ， 


已 判断 成 舰 是 售 航 击 中 。 


信 这 是 一 个 处 理 玩家 后 
战 靓 开火 的 方法 。 





模型 如 何 与 视图 交互 

游戏 的 状态 发 生变 化 ， 即 玩家 击 中 或 未 击 中 战舰 时 ， 视 图 需要 更 新 界面 。 为 此 ， 模 
型 必须 与 视图 交流 ， 好 在 有 多 个 方法 可 供 模型 来 完成 这 项 任务 。 我 们 将 先 实现 模型 
中 的 游戏 逻辑 ， 再 添加 更 新 视图 的 代码 。 





















视 周 ， 玩 宗 向 80 处 
开火 ， 击 中 了 一 般 战 舰 ， 
你 需要 更 新 了 。 


了 明白， 谢谢 ! 我 将 
更 新 界面 ， 以 反 喘 这 


一 到 。 








view.displayHi+(*10") 





( 
让 视图 能 够 更 新 界面 。 






你 需要 更 多 战舰 和 更 大 的 游戏 极 


编写 模型 代码 前 ， 需 要 考虑 如 何在 模型 中 表示 战舰 的 状态 。 在 第 2 草 的 向 单 战舰 洲 
戏 中 只 有 一 稻 战 舰 ， 它 隐藏 在 一 个 1 x 7 的 游戏 板 中 。 现 在 的 情况 更 复杂 一 些 : 有 3 
艘 战舰 ， 它 们 隐藏 在 一 个 7x7 的 游戏 板 中 ， 如 下 所 示 。 














在 现实 世界 ， 战 舰 不 可 能 倡 在 
| 一 起 ， 如 果 在 游戏 中 出 现 这 种 

情况 ， 玩 家 将 感到 很 怪异 。 后 
面 讨论 在 游戏 板 中 随机 地 放 重 
成 静 时 ， 将 介绍 如 何 避 免 战 微 
恒 在 一 起 。 


每 笨 战 钢 都 占据 2D 游 戏 构 
中 的 5 个 单元 格 。 


B 
这 艘 战 千 占据 单元 格 一 
BO、 CO 和 DO。 


wRg= FE | | | | | | | ansnenmmrns 


i 位 。 每 钥 战 舰 都 占据 三 个 单 
元 格 ， 因 此 对 于 每 租 战 舰 ， 
都 需要 存储 三 个 可 能 被 击 中 
的 部 位 。 





这 是 第 三 靓 战 冕 ， 它 占据 音 
元 格 C5 一 65。 





SRR 降 笔 上 阵 
NS 根据 前 面 对 新 游戏 板 的 描述 ， 你 将 如 何在 模型 中 表示 战舰 呢 ? (只 考虑 


它们 的 位 置 ， 击 中 的 部 位 以 后 再 说 。) 请 从 下 面 选择 最 佳 的 解决 方案 。 


J 像 第 2 章 那样 处 理 战 舰 ， 使 用 9 个 变量 来 存储 口 使 用 三 个 数组 ， 每 个 数组 都 包含 3 个 元 素 ， 指 
战舰 占据 的 位 置 。 出 了 一 盘 战 舰 占 据 的 位 置 。 

J 使 用 一 个 包含 49 个 元 素 的 数组 ， 每 个 元 素 对 ” 口 使 用 包含 三 个 位 置 属性 的 对 象 ship， 并 将 所 
应 于 游戏 板 的 一 个 单元 格 ， 其 中 存储 了 占据 有 的 战舰 都 存储 在 数组 ships 中 。 
了 该 单元 格 的 战舰 的 编号 。 

J 使 用 一 个 包含 9 个 元 素 的 数组 ， 其 中 元 素 0~2 
存储 了 第 一 般 战 舰 的 位 置 ， 元 素 3~ 5 为 第 二 般 
战舰 的 位 置 ， 元 素 6 一 8 为 第 三 艘 战舰 的 位 置 。 / 0 


你 也 可 以 在 这 里 列 
出 你 的 解决 方案 。 
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战 现 的 数据 结构 


如 何 表 示 战 舰 


前 面 列 出 了 很 多 表示 战舰 的 方式 ， 你 还 可 能 想 出 了 其 他 方式 。 不 管 是 什么 
样 的 数据 ， 存 储 的 方式 都 有 很 多 ， 你 在 选择 时 必须 进行 权衡 : 有 些 方式 可 





方 省 存储 空间 ， 有 些 可 优化 运行 时 间 ， 有 些 更 容易 理解 ， 等 等 。 


我 们 选择 了 一 种 非常 简单 的 战舰 表示 方式 : 将 每 艘 战舰 分 别 用 一 个 对 象 表 
示 。 这 个 对 象 存储 了 战舰 占据 的 位 置 以 及 可 能 被 击 中 的 部 位 。 来 看 看 如 何 





表示 每 舰 战舰 : 


每 租 战 秽 都 是 一 个 对 象 。 
4 
var shipl = { 
on, 
-nl 


locations: 20” ， 


hits: ["", 


-A 


war 
1 


属性 hits 也 是 一 个 数组 ， 指 出 了 战舰 的 各 个 部 
位 是 否 被 击 中 。 我 们 将 该 数组 的 每 个 元 素 都 初 
始 化 为 空 字符 串 ， 并 在 战舰 的 某 个 部 位 被 击 中 
时 将 相应 的 元 素 改 为 “hit 。 


下 面 演 示 了 如 何 表 示 全 部 三 艘 战舰 : 


var shipl = { locations: ["10", "20", 
var ship2 = { locations: ["32", "33", 
Var ship3 = { locations: ["63", "64", 





这 个 对 象 包 含 属 性 


AL locations 和 hits。 


属性 locations 是 一 个 数 组 ， 
人 一 其 中 存储 了 战 需 占据 的 游 
戏 板 单元 格 。 


"30"] p 


三 ~ 注意 到 我 们 使 用 两 个 数字 来 
表示 战 秽 占 据 的 单元 格 ， 其 
中 0O 对 应 于 A，1 对 应 于 B， 
依 此 类 推 。 


每 艘 战舰 都 用 两 个 数组 表示 ， 分 别 指 

出 了 战舰 占据 的 位 置 以 及 被 击 中 的 部 

位 5 
| 


[" IAL 
1 


[™ IAL 
1 


人 


"30"], hits: 


wv 


; I "9 本 
; '' "了 】 }; 
"hit"] Fs 


TVT TYT 


"34"], hits: 


"65"], hits: 


wv or 
1 


我 们 不 使 用 三 个 变量 来 存储 这 些 战 舰 ， 而 是 使 用 一 个 数组 来 存储 


它们 ， 如 下 所 示 : 


注意 到 变量 名 ships 为 复数 形式 。 


人 
var ships = [{ locations: ["10", "20", 
{ locations: ["32", "33", 
{ locations: ["63", "64", 





将 一 个 数组 赋 给 变量 ships， 这 


个 数组 存储 了 全 部 三 艘 战 先 。 


"30™"]; hits: [5 | }, 人 

"34"]， hits: Le Be | }， 议 是 第 一 艘 战舰 。 

W655 "| hits: Ww 下 "hit"] }]; 这 是 第 二 可 ，。 
这 是 第 三 艘 。 


人 这 艘 战舰 位 于 游戏 极 单 
元 格 65 的 部 位 被 击 中 。 


BS 
yg 


ws A 
= 过 战舰 冰 攻 贴 
假设 玩家 向 下 面 的 位 置 开火 。 请 根据 表示 战舰 的 数据 结构 ， 将 战舰 和 
MISS 冰 箱 贴 放置 到 游戏 板 的 正确 位 置 。 玩 家 击 沉 了 所 有 的 战舰 吗 ? 我 
一 一 们 指出 了 玩家 第 一 次 开火 后 的 效果 。 


玩家 向 下 面 的 位 置 开火 ， 
在 游戏 板 上 指出 玩家 这 
A6, B3, C4, D1, BO, D4, FO, A1, C6, B1, B2, E4, B CC ee 
oe 样 开火 的 效果 。 


入 。 “、 这 是 表示 战舰 的 数 
var ships = [{ locations: ["06", "16", "26"], hits: ["hit", "", ""] }, 据 结 构 。 请 在 其 中 
{ locations: ["24", "34",， "44"],， hits: Le J we] } ， 指出 玩家 开火 后 ， 


各 艘 战舰 的 哪些 部 
{ locations: ["10", "11", "12"], hits: ["™"™, "", ""] }]; 位 被 击 中 。 


pan 这 是 游戏 极 和 冰箱 贴 。 








) 


可 能 不 会 用 完 所 有 的 冰箱 贴 。 
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数据 结构 的 练习 


下 面 练习 使 用 数据 结构 snips 来 模拟 开火 的 效果 。 假 设 数据 结构 snips 如 下 ， 
请 据 此 辐 答 下 面 的 问题 并 补 全 代码 。 这 是 游戏 工作 原理 的 重要 组 成 部 分 ， 请 
务必 查看 本 章 末 尾 的 答案 ， 绸 继续 往 下 阅读 。 





var ships = [{ locations: ["31", "41", "51"], hits: ["，，"" ""] }, 
{ locations: ["14", "24", "34"], hits: ["", "hit", ""] }, 


{ locations: ["00", 01， “U2” |， hits: ["hit", We | }]; 


哪些 战舰 已 被 击 中 ? _ _ 被 击 中 的 是 哪些 部 位 ? _ _ 


假设 玩家 向 D4 处 开火 ， 会 击 中 战舰 吗 ?” _ 如 果 会 ， 击 中 的 是 哪 艘 ? 
假设 玩家 癌 B3 处 开火 ， 会 击 中 战舰 吗 ? 如果 会 ， 击 中 的 是 哪 释 ? 


请 补 全 下 面 的 代码 ， 访 问 第 二 租 战 舰 的 中 间 部 位 ， 并 使 用 console.Iog 打 印 


其 值 : 
var ship2 = ships[ |]; 
var locations = ship2.locations; 
console.log("Location is " + locations[ 1); 


请 补 全 下 面 的 代码 ， 检 查 第 三 艘 战舰 的 第 一 个 部 位 是 否 被 击 中 : 


var ship3 = shipsl[ ]; 
var hits = ship3. 
if ( === "hit") { 





console.log("Ouch, hit on third ship at location one"); 
} 
请 补 全 下 面 的 代码 ， 指 出 第 一 般 战 舰 的 第 三 个 部 位 被 击 中 : 
var = ships[0]; 
var hits = shipl. > 


hits[ ] = 7 


州 Io 
TT 
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锋 现 mode1 对 象 


知道 如 何 表示 战舰 及 其 被 击 中 的 部 位 后 ， 来 编写 一 些 代码 。 首 先 ， 创 ”boardsize; 游戏 板 网 格 
建 noael 对 象 ， 并 将 前 面 创建 的 ships 数 据 结构 作为 它 的 一 个 属性 。 说。 /的 大 小 。 

到 属性 ，moael 对 象 还 需 包 含 其 他 一 些 属性 ， 如 存储 战舰 数量 的 属性 
numships。 你 可 能 会 问 ， 我 们 都 知道 总 共有 三 条 战舰， 为何 还 需 

要 属性 numships 呢 ?也 许 你 以 后 要 提高 游戏 的 难度 ， 在 其 中 / 
包含 4 艘 或 5 艘 战舰 。 通 过 使 用 一 个 属性 来 表示 战舰 数 ， 而 不 
是 使 用 硬 编码 值 (并 在 代码 中 始终 使 用 这 个 属性 ， 而 不 是 
硬 编码 值 ) ， 可 避免 给 以 后 需要 修改 战舰 数 时 带 来 麻烦 ， 
因为 这 样 只 需 修改 一 个 地 方 。 


说 到 硬 编码 ， 我 们 将 暂时 以 硬 编码 的 方式 指定 战舰 的 位 











numShips: 游戏 包含 
的 战舰 数 。 


ships: 战舰 所 处 的 位 
-一 一 置 以 及 被 击 中 的 部 位 。 





shipSunk: 有 多 少 
艘 战舰 已 被 击 沉 。 


shipLength: 每 艘 战 





置 。 知 道 战 舰 的 位 置 后 ， 游 戏 测试 起 来 将 更 容易 ， 并 可 将 \ 舰 占 据 多 少 个 单元 格 。 
重点 放 在 游戏 的 核心 逻辑 上 上。 后面 将 编写 在 游戏 板 上 随机 放 
置 战舰 的 代码 。 \ fire: 一 个 处 理 玩家 向 战 
舰 开 火 的 方法 ， 它 判断 
下 面 来 创建 mode1 对 象 : 、 
战舰 是 否 被 击 中 。 
model 是 一 个 对 象 。 
/ i 、 编码 值 : board5ize 
这 三 个 属性 让 我 们 能 够 各 免 信用 玉 (，。 水 提 他 的 成 有 现在 已 经 有 不 
var model = { (游戏 板 网 格 的 大 小 ) 、 WA 人 少 状态 了 | 
boardSize: 7, 和 shipLength (每 稻 战 观 占 据 多 | 
numShips: 3, 
SI PnengEne 属性 shipsSunk (游戏 开始 时 被 初始 化 为 0) 指 
shipssSunk: 0， 所 一 一 出 玩家 当前 击 沉 了 多 少 笨 战 钢 。 
ships: [{ locations: ["06", "16", "26"], hits: {["™", "", ""] ), 
{ locations: ["24", "34", "44"], hits: [em Wi 2 }, 
{ locations: ["10", "LI 2 |， hits: Ee 人 ay] }] 
， 和。 从、 虹 性 ships 是 一 个 ship 对 象 数组 ， 基 
} 人 稍 后 将 随机 地 生成 战 秽 己 据 的 单元 格 ， 了 二 守 存 储 了 一 般 战 山 的 位 
现在 暂时 以 硬 编码 的 方式 指定 它们 ， 以 人 
简化 游戏 测试 工作 置 和 被 击 中 的 部 位 。 注 意 到 我 们 将 
。 ships 从 变量 改 成 了 model 对 象 的 属 


另外 ， 对 于 数组 locations 和 hits， 我 们 以 硬 编 码 的 方式 
指定 其 长 度 。 本 书后 面 将 讨论 如 何 动态 地 生成 数组 。 
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规划 方法 
boardSize: 游戏 板 网 格 


规划 方 fire 的 大 小 。 


numShips: 游戏 包含 








由 view 对 象 负责 ， ee 判断 是 否 ee / ships: 战舰 所 处 的 位 
逻辑 。 


一 置 以 及 被 击 中 的 部 位 。 


shipsSunk: 有 多 少 
艘 战舰 已 被 击 沉 。 










判断 是 否 击 中 了 战舰 很 容易 : 给 定 玩 家 猜测 的 位 置 ， 你 只 需 如 下 
这 样 做 。 


a 检查 每 艘 战 般 ， 看 它 是 否 占据 了 这 个 位 置 。 








ee shipLength: 每 艘 战 
本 如 所 在， 路 说 明 击 中 下 因此 需要 设 半 数组 hits 内 相应 元 素 ， \ 舰 占据 多 少 个 单元 格 。 
并 让 视图 知道 击 中 了 。 为 指出 击 中 了 战舰 ， 还 需 从 方法 fire 返 
团 巷 二 训 总 。 fire: 一 个 处 理 玩家 回 战 


舰 开 火 的 万 法 ， 它 判断 


图 JJL > EE 多 二 hw 多 3 
如 果 没 有 战舰 位 于 猜测 的 位 置 ， 就 没有 击 中 。 我 们 将 让 视图 知 战舰 是 否 被 二 中 ， 


道 这 一 点 ， 并 从 方法 fire 返 回 false。 


击 中 了 一 稻 战 舰 时 ， 方 法 fire 还 需 判 断 该 战舰 是 否 被 击 沉 。 我 们 将 在 编写 好 其 他 逻 
辑 后 再 处 理 这 一 点 。 


突现 方法 fire 
下 面 来 建立 方法 fire 的 基本 框架 。 这 个 方法 将 猜测 的 位 置 作为 参数 ， 并 和 迭代 每 艘 战舰 
以 确定 是 否 击 中 了 它 。 这 里 先 不 编号 击 中 检测 代码 ， 而 只 是 建立 大 致 的 框架 


var model = { 











boardSize: 7, 

numShips: 3, 

shipsSunk: 0， 

shipLength: 3, 

ships: [{ locations: ["06", "16", "26"], hits: ["", "", ""] }, 
{ locations: ["24", "34", "44"], hits: ["™"™", "", ""] }, 别 忘 了 在 这 文 里 加 荆 
{ locations: ["10"，"11"，"12"]，hits: {[""™", "", ""] }], 一 个 如 号 。 


这 个 方法 接受 一 个 参 关 


Ra 8 每 次 检查 一 艘 战舰 。 


for (var i = 0; i < this.numShips; I++) { 





fire: function(guess) { 


var ship = this.ships[il]; 
} fC 
} 二 Pog 站 
获得 一 条 战舰 ， 接 下 来 需要 检查 guess 是 否 是 该 战舰 占据 的 位 置 之 一 。 
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| 
综合 心 用 


判断 是 否 击 中 了 战舰 


在 每 次 循环 中 ， 都 需要 判断 guess 是 否 是 当前 战舰 占据 的 位 置 之 一 : 





YL 每 艘 战舰 。 
for (var i = 0; i < this.numShips; I++) { 
ans ss i a 获取 战 钢 占 据 的 位 置 ， 这 
locations = ship.locations; 是 战 租 的 一 个 数组 属性 。 
1 SS 甫 要 编写 判断 guess 是 否 位 于 
} 数组 locations 中 的 代码 。 


当前 面临 的 情形 如 下 : 我 们 有 一 个 字符 串 guess， 需 要 在 数组 1ocations 中 查 
找 它 。 如 果 在 数组 中 找到 它 ， 就 说 明 击 中 了 战舰 : 
ER 我 们 需要 判断 guess 的 值 是 否 包 
gu 含 在 战舰 的 位 置 数组 中 。 
locations = ["06"，"16"， "26"]; 


为 此 ， 可 再 编写 一 个 循环 来 遍历 数组 1ocations 的 每 个 元 素 ， 并 将 其 与 guess 
进行 比较 ， 如 有 果 它 们 相同 ， 束 说 明 击 中 了 战舰 。 
这 里 不 这 样 做 ， 而 是 使 用 田 一 种 更 简单 的 方式 : 
var index = locations.indexOf(guess); 下 、 方法 indexOf 在 数组 中 查找 指定 的 值 ; 如 果 找 到 ， 
就 返回 相应 的 索引 ， 否 则 返回 -1。 


通过 使 用 indexof， 可 像 下 面 这 样 编写 代码 来 判断 十 否 击 中 了 战舰 : 








for (var i = 0; i < this.numShips; i++) { 


var ship = this.ships[il]; on. 
注意 到 数组 的 方 法 index0f 与 字符 串 的 方法 indexOf 大 


locations = ship.locations; 亡 将 一 个 值 作为 参数 ， 并 返回 这 个 值 在 数组 中 的 案 引 
var index = locations.indexOf(guess); 0 ei | 汶 个 值 就 返回 一 1) o 
(如果 没有 找到 这 但 ， 掉 也 
if (index >= 0) { 
// 击 中 了 战舰 ! ) 
} 因此 ， 如 果 返 回 的 索引 大 于 或 等 于 零 ， 就 
} 意味 着 玩家 猜测 的 值 包 含 在 数组 locations 


中 ， 因 此 击 中 了 战舰 。 


相 比 于 使 用 循环 ， 使 用 indqexof 并 不 能 提高 效率 ， 但 需要 编写 的 代码 更 少 ， 而 且 代 
码 的 意图 也 更 清晰 : 使 用 index0f 时 ， 更 容易 明白 要 在 数组 中 查找 什么 值 。 总 之 ， 
你 的 编程 工具 腰 市 上 又 多 了 一 个 工具 。 
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实现 方法 


性 

整合 起 来 

为 完成 方法 fijre， 还 需 作 出 一 个 判断 ， 如 有 打击 中 了 ， 该 怎么 办 呢 ? 就 目 
前 而 言 ， 我 们 只 需 在 模型 中 进行 标记 ， 即 将 数组 hits 的 相应 元 素 设 置 为 
"Pit"。 下 面 来 将 这 些 整 合 起 来 : 





var model = { 
boardSize: 7, 
numShips: 3, 
shipsSunk: 0， 
shipLength: 3, 
ships: [ { locations: ["06", "16", "26"], hits: ["™"™, "", ""] 由 
{ locations: ["24", "34", "44"], hits: ["™"™", "", ""] }, 
{ locations: ["10", "11", "12"], hits: ["™", "", ""] } ], 


fire: function(guess) { 
for (var i = 0; i < this.numShips; i++) { 


对 于 每 甬 战 舰 …… 
var ship = this.ships[il]; 2 


var locations = ship.locations; 人 下 加 果 guess 包 含 在 数组 locations 中 ， 
就 说 明 击 中 了 该 战舰 。 


var index = locations.indexOf(guess); 


if (index >= 0) 1 和 ”一 四 此 ， 将 数组 hits 的 相应 
ship.hits[index] = "hit"; 元 过 设置 为 “hit”， 
return true; me 
} 由 于 击 中 了 战 静 ， 需要 返回 
true, 


} 


return false; 


人 也 设 有 发 现 被 击 中 的 战舰 ， 
就 说 明 设 有 击 中 任何 战 球 ， 因 此 返回 false。 


这 为 实现 mode1 对 象 开 了 一 个 好 头 ， 余 下 的 工作 还 有 两 项 : 判断 


征 否 有 战舰 被 击 沈 ， 让 视图 知道 模型 发 后 了 变化 ， 以 便 将 最 新 
的 情况 告知 玩家 。 下 和 面 就 来 处 理 这 两 项 任务 。 
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co 人 
综 日 vy 用 


别 这 人 么 哆 嗓 好 不 好 
不 好 意思 ， 我们 不 得 不 旧 话 重担 。 前 面 使 用 对 象 和 数组 时 ， 代 码 有 点 
嗪 ， 再 来 看 一 眼 这 些 代码 ; 


for (var i = 0; i < this.numShips; i++) 





var ship = this.ships[il]; 2 首先 获取 战 秽 。 
var locations = ship.locations; 所 一 然后 ， 获取 战舰 的 位 置 (数组 
locations) 。 
SS 所 ”再 获取 guess 在 数组 locations 
中 的 索引 。 





在 有 些 人 看 来 ， 这 些 代 码 太 喝 嗪 了 。 为 什么 呢 ? 因为 可 使 用 串 接 (chaining) 来 简化 这 
些 引 用 。 串 接 让 我 们 能 够 将 对 象 引 用 连接 起 来 ， 从 而 避免 创建 临时 变量 ， 如 上 述 代码 中 


的 LIocations。 


你 可 能 会 句 ， 为 何 说 locations 和 是 临时 变量 呢 ? 因为 我 们 只 将 locations 用 来 临 
时 存储 ship.locations, 以 便 对 其 调用 方法 index0f 来 获取 guess 的 索引 ， 在 这 个 
方法 的 其 他 任何 地 方 ， 都 不 需要 locations。 通 过 使 用 串 接 ， 可 避免 使 用 临时 变量 
Toastions,. Vi FAs 








将 上 面 标 出 的 两 行 代码 
人 ”并 成 了 一 行 。 


var index = ship.locations.indexOf(guess); 


串 接 的 工作 原理 


串 接 只 是 一 种 快捷 方式 ， 可 避免 使 用 多 个 步骤 来 访 癌 对象 《和 数组 ) 的 属性 和 方法 。 
下 面 来 详细 地 看 看 前 面 使 用 串 接 将 两 条 语句 合 而 为 一 的 做 法 : 

L 一 一 这 是 一 个 ship 对 象 。 
var ShiP = { locations: ["06", "16", "26"], hits: ["™, "™", "™"] }; 


Sk 6 o 
var locations = ship. Locations; E ee 组 locations 











var index = locations.indexOf(guess); 《一 再 通过 这 个 数组 来 访问 方法 indexOf。 


过 将 表达 式 串 接 起 来 ， 可 将 最 后 两 条 语句 合 而 为 一 ， 并 避免 使 用 变量 


locations: 


ship.locations.indexOf (guess,) 


本 个 本 
Osiipi& 。 和 @ 这 个 对 象 包 人 数组 四 这 个 数组 包含 方法 
属性 locations indexOf 
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战舰 被 击 沉 了 吗 


回 到 战舰 


现在 需要 编写 判断 战舰 是 否 被 击 沉 的 人 代码。 判断 准则 你 已 经 知道 了 : 
当 所 有 部 位 都 被 击 中 上 时， 战舰 就 被 击 沈 。 我 们 可 添加 一 个 小 小 的 辅助 
方法 来 检查 战舰 是 否 被 击 沉 : 

我 们 将 议 个 方法 命名 为 isSunk。 它 接受 一 艘 战舰 作为 参数 ， 

在 该 战舰 被 击 沉 时 返回 true， 在 它 还 J 








个 方法 将 一 稻 战 钢 作 为 党 
| 数 ， 并 检查 是 否 其 每 个 部 位 
isSunk: function(ship) { 都 被 击 中 。 
for (var i = 0; i < this.shipLength; i++) { 
If (ship.hits[i] !== "hit") { 
return false; 代 只 要 有 任何 部 位 未 被 击 中 ， 战 舰 就 
} 还 衣 在 水 面 上 ， 因 此 返 @false。 


} 
return true; S 


一 


人 否则， 战舰 己 被 击 识 ， ES 个 方法 添加 到 对 象 model 
四 此 设 @true。 中 一 一 紧 跟 在 方法 fire 后 面 。 


现在 ， 可 以 在 方法 fire 中 调用 这 个 方法 来 判断 战舰 古 否 被 击 沉 了 : 


fire: function(guess) { 
for (var i = 0; i < this.numShips; i++) { 
var ship = this.ships[i]; 
var index = ship.locations.indexOf(guess); 
if (index >= 0) { 


ship.hits[index] = "hit"; 确定 战 角 被 击 中 后 ， 执 行 这 个 
if (this.isSunk(ship)) { 人 ~、 检查 。 如 果 战 舰 被 击 沈 ， 就 将 


ty 击 沉 的 战舰 数 (存储 在 model 对 
} 象 的 属性 shipsSunk 中 ) 加 1。 
return true; 
} 
} 
return false; 
y ~ 紧 跟 在 方法 fire 的 后 面 添加 新 方法 isSunk。 务必 在 model 对 
isSunk: function(ship) { ... } 象 的 属性 和 方法 之 间 加 上 逗号 ， 千 万 别 忘 了 | 


但 Sy 

族 后 一 击 

modqe1 对 象 就 要 实现 好 了 。 模 型 存储 游戏 状态 ， 并 包含 判断 猜测 的 位 置 是 否 击 中 了 
战舰 的 还 辑 。 现 在 唯一 缺失 的 是 将 判断 结果 告诉 视图 的 代码 ， 下 面 就 来 编写 它们 











这 里 列 出 了 完整 的 model 对 象 


var model = 1 7 与 在 让 你 在 一 个 地 方 看 到 它 。 


}; 


boardSize: 7, 
numShips: 3, 
shipsSunk: 0， 
shipLength: 3, 
ships: [ { locations: ["06", "16", "26"], hits: ["", "", ""] }, 
{ locations: ["24", "34", "44"], hits: ["", "", ""] }, 
{ locations: ["10", "11", "12"], hits: ["", "", ""] } ], 
fire: function(guess) { 
for (var i = 0; i < this.numShips; i++) { 
var ship = this.ships[i]; 
var index = ship.locations.indexOf(guess); 
if (index >= 0) { 告诉 视图 ， 玩 家 的 猜测 
ship.hits[index] = "hit"; 击 中 了 战舰 。 
view.displayHit(guess); 
view.displayMessage("HIT!"); 
if (this.isSunk(ship)) { 
view.displayMessagel("You sank my battleship!"); < 一 


人 、_ 并 让 祝 图 显示 消息 “HITI”。 


this.shipsSunkt++; 让 玩家 知道 他 击 
} 记 了 一 艘 战舰 | 


return true; 


激 视图 ， 玩 家 的 猪 测 
} 告诉 视图 ， 玩 家 的 
上 、 没有 击 中 战 冕 。 


view.displayMiss(guess); 
view.displayMessage("You missed."); [CC_ 让 视图 显示 消息 Re 


综合 应 用 


return false; missed. 。 
j5 
isSunk: 工 ti hi 前 加 六 
ES 八 _ 前 面 说 过 ，view 对 象 的 这 些 方法 将 
for (var i = 0; i < this.shipLength; i++)  { 郊 去 于 区 
一 个 元 素 的 属性 class 设 置 为 “hit” 
if (ship.hits[i] !== "hit") { 或 miss”， 这 个 元 素 的 id 由 字 
return false; 符 串 guess 指 定 的 行 号 和 列 号 组 成 ， 
换 句 话说 ， view 对 象 将 数组 hits 中 
的 hit ”转换 为 HTML 中 的 “hit” 。 
return true; 但 别 记 了 ， HTML 中 的 “hit” 只 影响 
徊 面 显示 ， 而 model 对 象 中 的 “hit” 


表示 的 是 实际 状态 。 


你 现在 的 人 





model 的 练习 





一 些 调 用 方法 fire 的 代码 〈 一 些 未 击 中 战舰 的 猜测 位 置 ) 


将 model 对 象 的 所 有 代码 都 添加 到 battleship.js 中 ， 再 通过 调用 model 对 和 象 的 方 
每 次 调用 时 都 传 入 由 行 号 和 列 号 组 成 的 猜测 位 置 。 战 舰 
位 置 是 以 硬 编 码 方式 指定 的 ， 要 击 中 战舰 的 所 有 部 位 很 容易 。 请 尝试 自己 编写 
。 要 查看 我 们 的 测试 


eee Bartieship 
全 从 localhost/-.Beth/HFJSe/ch 


\ 
em TPR 
一 | | 
ew WA [eg 
试 营 
法 fire 来 进行 测试 
7 代码 文件 ， 请 下 载 battleship_testerjs。 
ee 
果 ， 要 删除 或 注释 model.fire("S53"); 
挤 前 面 测试 视图 的 代 
码 。 文 件 battleship_ model.fire("06"); 
testerjs 演 示 了 如 何 model.fire("16"); 
这 样 做 。 model.fire("26"); 


model.fire("34"); 
model.fire("24"); 
model.fire("44"); 


model.fire("12"); 
model.fire("11"); 
model.fire("10"); 


重新 加 载 battleship.html， 
舰 和 MI99 图 像 。 


上 滩 





你 将 在 游戏 板 上 看 到 战 


有 


dS 晶 深 的 问题 


DS 
[9) 。 使 用 串 接 将 语句 合并 一 定 胜 过 让 语句 分 开 吗 ? 


AAA ， 

全 ”不 一 定 。 曲 接 并 不 能 极 大 地 提高 效率 《可 节省 一 个 
， 但 确实 让 代码 更 简短 。 我 们 认为 ， 囊 接 链条 不 长 
最 多 两 三 层 ) 时 ,阅读 起 来 比分 为 多 行 代码 更 容易 ， 但 这 
只 是 我 们 的 喜好 。 如 果 你 想 让 语 向 分 开 ， 也 完全 可 以 。 如 
果 你 要 使 用 串 接 ， 一 定 不 要 让 串 接 链条 太 长 ; 否则 阅读 和 
理解 起 来 都 更 难 。 


(9); 在 这 里 ， 数 组 (ships) 里 面 有 对 象 (ship)， 


而 对 象 又 包含 数组 (locations) 。 像 这 样 藤 套 对 象 和 数 
组 时 ， 最 多 可 和 骨 套 多 少 层 ? 
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AL ， 

号 ， 从 理论 上 说 ， 想 吝 套 多 少 层 部 可 以 ， 但 实际 上 ， 广 
套 层 数 不 会 太 多 。 es 
能 说 明 你 的 数据 结构 大 复杂， 需要 重新 考虑 组 织 方式 。 


y 

9): 我 注意 到 ，mode1l 对 和 象 包 含 属性 poardsize, 但 从 
未 使 用 过 它 。 这 个 属性 是 做 什么 用 的 ? 

A 

sa 在 后 面 编写 的 代码 中 ， 将 使 用 boardSize 以 及 
model 对 和 象 的 其 他 属性 。model 的 职责 是 管理 游戏 的 状 
态 ， 而 poardSize 绝 对 是 一 个 不 可 或 缺 的 状态 。 控 制 器 将 
通过 访问 modqe1 对 象 的 属性 来 了 解 游戏 的 状态 ， 后 面 还 将 
给 modqe1 对 象 添 加 其 他 使 用 这 些 属 性 的 方法 。 


2 空 


人 


-小 号 


Am 1 

灾 现 控制 器 

实现 好 视图 和 模型 后 ， 下 面 来 实现 控制 器 ， 将 这 个 应 用 程序 的 各 个 部 分 整合 起 来 。 
从 较 高 的 层次 看 ， 控 制 器 获取 和 处 理 猜 测 ， 并 将 其 交 给 模型 ， 从 而 将 各 个 部 分 整 
合 起 来 。 它 还 跟踪 一 些 管理 型 细节 ， 如 已 猜测 多 少 次 以 及 游戏 的 进度 。 为 此 ， 控 
制 器 依赖 于 模型 来 跟踪 游戏 状态 ， 并 依赖 于 视图 来 显示 游戏 界面 。 


具体 地 说 ， 我 们 将 把 如 下 职 贡 交 给 控制 右 。 














”获取 并 处 理 玩 家 的 猜测 (如 A0 或 B1) 。 
”记录 猜测 次 数 。 
”让 模型 根据 当前 猜测 更 新 自己 。 
@@ ”判断 游戏 是 否 结束 〈 即 是 否 击 沉 了 所 有 的 战舰 ) 。 
为 实现 控制 严 ， 首 先 在 controller 对 象 中 定义 一 个 属性 guesses。 然 后 实现 一 个 方 


法 processGuess， 它 接受 一 个 由 字母 和 数字 组 成 的 猜测 位 置 ， 对 其 进行 处 理 ， 并 
将 结果 交 给 模型 。 


guesses: 记录 猜测 次 数 。 


prcessGuess: 对 猜测 位 置 进 行 处 理 ， 表 将 结 
果 交 给 模型 ， 检 测 游戏 是 否 结束 。 





controller 对 象 的 基本 框架 如 下 ， 接 下 来 的 儿 页 将 填充 其 代码 : 


en 这 里 定义 了 controller 对 象 ， 它 包 含 一 个 属性 
guesses: 0, 7 guesses, 这 个 属性 被 初始 化 为 0。 


processGuess: function(guess) { 


其 他 代码 文 是 方 、 
// 其 他 代 这 是 方法 processGuess 的 方法 头 ， 它 将 一 个 
} 格式 为 “AO” 的 猜测 位 置 作为 参数 。 
}; 


你 现在 的 位 置 ， 


必用 
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处 理 玩家 的 猜测 


处 理 玩 杀 的 猜测 


控制 器 的 职责 是 获取 玩家 的 猜测 ， 确 认 猜 测 的 位 置 是 有 效 的 ， 再 将 其 交 给 model ER 
对 象 。 但 它 从 哪里 获取 玩家 的 猜测 呢 ? 现在 不 要 考虑 这 一 点 ， 稍 后 将 介绍 。 就 目 之 入 过 





、 、 技巧 专注 于 当前 办 

前 而 言 ， 我 们 只 需 这 样 假设 : 在 某 个 地 方 ， 有 代码 调用 controlLer 对 象 的 方法 编写 的 代码 的 需求 。 同 

processGuess， 并 给 它 提供 一 个 格式 如 下 的 字符 串 。 人 _、/ 时 考虑 整个 问题 通常 更 
难 成 功 。 


尔 现在 已 经 知道 了 战舰 位 置 的 格式 ， 
3FK | 它 由 一 个 字母 和 一 个 数字 组 成 。 


当然 ， 玩 家 不 会 输入 一 


获得 这 种 格式 的 猜测 位 置 (一 个 字母 和 一 个 数字 组 成 的 字符 串 ， 如 "aA3") 后 ,你 /” 个 无 效 的 猜测 ， 对 吗 ? 
需要 将 其 转换 为 模型 能 够 理解 的 格式 (两 个 数字 组 成 的 字符 串 ， 如 "03") 。 下 面 履 宫 中 这 好 呈 供给 入 是 有 
简要 地 演示 了 如 何 将 有 效 的 输入 转换 为 只 包含 数字 的 格式 。 加 


假设 我 们 获得 了 一 个 字符 串 ， 
它 由 一 个 字母 和 一 个 数字 组 成 : 


"TA3" 
/ \ A 一 我 们 将 这 个 字符 串 分 成 两 部 分 : 表 
A" 3" 示 行 的 字母 和 表示 列 的 数字 。 
再 将 字母 转换 为 数字 ， | 
并 通过 检查 确认 这 个 将 其 转换 为 数字 ， 并 通过 检查 确认 
数字 在 0 和 6 之 间 。 24 


这 个 数字 在 0 和 6 之 间 。 


~、、0 3 
/ 最 后 ， 将 这 两 个 数字 合并 成 一 个 字 


"03" 二 符 $。 


重要 的 事情 先 做 。 我 们 必须 先 检查 输入 是 有 效 的 。 编 号 代码 前 ， 我 们 先 来 进行 
规划 。 


规划 代 砚 


我 们 不 将 处 理 猜 测 的 代码 都 放 在 方法 processGuess 中 ， 
而 是 编写 一 个 小 小 的 辅助 国 数 (因为 可 能 需要 重用 这 些 
代码 ) ， 并 将 其 命名 为 parseGuess。 


编写 代码 前 ， 先 来 看 看 它 将 如 何 工作 。 











获取 由 一 个 字母 和 一 个 数字 组 成 的 
玩家 猜测 。 


对 输入 进行 检查 ， 确 认 包 是 有 效 的 
(不 为 hull， 朋 不 大 长 也 不 大 短 ) 。 


将 其 中 的 字母 转换 为 数字 : A 转换 
为 0，8 转 换 为 1， 依 此 类 推 。 


检查 第 9 步 转换 得 到 的 数字 是 否 有 
效 (在 0 和 6 之 闽 ) 。 


个 数字 是 否 有 效 〈 也 在 0 和 


如 果 任 何 检 查 和 失败 ,都 返回 null; 
否则 ,将 这 两 个 数字 捞 接 成 一 个 他 
符 串 并 将 其 返回 。 





© © 日 © 


将 字母 转换 


转换 得 到 的 


创建 并 返 
问 字 符 事 
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分 析 玩 家 的 猜测 


锋 现 ParseGuess 
制订 可 靠 的 编码 计划 后 ， 来 动手 编写 代码 吧 。 


O_O 咱们 先 来 完成 第 1 步 和 第 2 步 。 我 们 只 需 将 玩家 的 猜测 作为 参数 ， 并 过 过 
检查 确认 它 是 有 效 的 。 当 前 ， 我 们 只 需 这 样 定义 有 效 性 : 一 个 不 为 nul1l 


且 包 含 两 个 字 符 的 字符 串 。 





将 猜测 的 位 置 赋 给 形 参 guess。 
VU 然后 检查 guess 不 为 null 且 长 度 为 2。 
function parseGuess(guess) { V 
if (guess === null || guess.length !== 2) { 


alert("Oops, please enter a letter and a number on the board."); 


如 果 不 是 这 样 的 ， 残 提醒 玩家 。 


接 下 来 ,我们 获取 其 中 的 字母 ， 痛 使 有 一 个 包含 字母 A 一 的 辅助 数组 将 
其 转换 为 数字 。 为 此 ， 可 使 有 方法 indexOf 获 取 这 个 字母 在 数组 中 的 索 
中， 如 下 所 示 。 





一 个 数组 ， 它 包含 可 出 现在 有 效 猜测 中 


| 的 所 有 字母 。 
function ParseGuess (guess) { 


var alphabet 一 ["A", MEY; WM ade "Ds Ws I "G"] 2 


If (guess === null || guess.length !== 2) { 


alert("Oops, please enter a letter and a number on the board."); 


} else { a 
获取 guess 中 的 第 一 个 


Var row = alphabet.indexOf(firstChar); 


} 上 再 使 用 indexOf 获 取 一 个 D 一 6 的 数字 ， 它 是 这 个 字母 在 数组 中 
的 位 置 。 为 明 自 其 中 的 工作 原理 ， 请 尝试 几 个 这 样 的 示例 。 


电信 、 
综合 心 用 


检查 组 成 猜测 位 置 的 两 个 字符 ， 看 看 饭 们 是 否 都 是 0 一 6 的 数字 ， 即 确认 它 
们 都 是 有 效 的 游戏 板 位 置 。 


© 





function parseGuess(guess) { 


var alphabet 一 ["A", "B", VC， "D", "E", "E'™, "G"] > 


If (guess === null || guess.length !== 2) { 


alert("Oops, please enter a letter and a number on the board."); 


else Ar 三 到 
获取 字符 串 中 的 第 二 个 
firstChar = guess.charAt(0); 字符 ， 它 表示 列 号 
var row = sphabet indexoe (iretenanD,_/ 

Var column = guess.charAt(1); 


使 用 函数 isNaN 检 查 row 和 


ty . column 是 否 都 是 数字 。 
if (isNaN(row) || isNaN(column)) { 


alert("Oops, that isn't on the board."); 
} else If (row < 0 || row >= model.boardSize || 


column < 0 || column >= model.boardSize) { 







alert("Oops, that's off the board!"); 





} 我 们 还 确认 这 些 数字 都 在 0 和 6 之 下 
实际 上 ， 这 里 的 做 法 更 通用 。 我 们 没有 以 硬 纺 
这 里 大 量 利用 了 生动 类 型 甘 换 | ol 码 的 方式 指定 数字 6， 而 是 让 模型 告诉 我 们 洲 
是 一 个 字符 串 ， 检 查 它 的 值 是 否 在 D 和 G 戏 板 有 多 大 ， 并 同 这 个 数字 进行 比较 。 


乙 间 时 ， 我 们 利用 了 怕 动 类 型 转换 来 将 
其 转换 为 数字 ， 以 便 进 行 比较 。 


ge 


这 里 没有 以 硬 编码 的 方式 将 row 和 column 可 存储 的 最 大 值 指 定 为 6， 
而 是 使 用 了 mode1l 对 象 的 属性 boardSize。 从 长 远 看 ， 你 认为 这 样 做 
有 何 优点 ? 











完成 函数 parseGuess 


©O 现在 来 编写 函数 parseGuess 的 最 后 一 部 分 代码 。 如 果 前 述 有 效 得 入 
检查 失败 ， 就 返回 null; 否则 将 猜测 的 行 号 和 列 号 合并 成 一 个 字 竺 
串 ， 并 将 其 返回 。 


function parseGuess(guess) { 


var alphabet 一 ["A", "BB "CC™ "D", "EE", "E'™, "G"] 2 


if (guess === null || guess.length !== 2) { 

alert("Oops, please enter a letter and a number on the board."); 
} else { 

firstChar = guess.charAt(0); 

var row = alphabet.indexOf(firstChar); 


var column = guess.charAt(1); 


if (isNaN(row) || isNaN(column)) { 


alert("Oops, that isn't on the board."); 


} else If (row < 0 || row >= model.boardSize || 
column < 0 || column >= model.boardSize) { 
alert("Oops, that's off the board!"); es 
注意 到 我 们 将 row 和 
} else { 


《一 至此，row 和 column 都 有 入 ol 可 一 个 
效 ， 因 此 返回 它们 ， 字符 串 ， 并 将 其 返回。 


return row + column; 


} 这 里 再 次 利用 了 自动 
} 类 型 转换 : row 是 一 个 
return null; < 如 果 执 行 到 了 这 里 ， 说 明 有 检查 是 失 数字 ， Www 
败 的 ， 因 此 返回 null。 字符 串 ， 因 此 结果 是 
一 个 字符 串 。 








只 I RS 、 i 
DS: 请 在 battleshipjs 中 输入 这 些 代码 ， 再 添加 类 似 下 面 的 函 
数 调 用 代码 : 
console.log(parseGuess("A0")); 
console.log(parseGuess("B6")); JavaScript 控 制 全 
console.log(parseGuess("G3")); 00 


console.log(parseGuess("H0O")); 16 
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console.log(parseGuess("A7")); 


重新 加 载 battleship.html， 并 确保 打开 了 控制 台 窗 
口 。 你 将 在 控制 合 窗 口中 看 到 parseGuess 的 结果 ， 
还 可 能 有 一 两 条 提示 消息 。 


回 到 控制 器 


辅助 图 数 parseGuess 编 写 好 后 ， 接 着 来 实现 控制 问 。 首 先 ， 将 函数 
parseGuess 与 既 有 的 控制 器 代码 整合 起 玉 : 








Var controller = { 
guesses: 0, 
使 用 parseGuess 来 验证 
processGuess: function(guess) { 玩家 猜测 的 有 效 性 。 


var Location = parseGuess(guess); 


el， 就 说 明 别 记 了，nhull 是 
获得 的 位 置 是 有 效 的 。 人 个 人 值 ， 


‘ 
| 将 在 这 里 添加 其 他 控制 器 代码 。 








}; 
这 就 实现 了 控制 如 的 第 一 项 职 贡 ， 来 看 看 还 有 哪些 职 贡 需要 实现 。 
国 元 宗 时 猜 ; B 
四。 记录 猜测 次 数 。 
人 我 们 将 处 理 
@ ”让 模型 根据 当前 猜测 更 新 自己 。 * 这 些 工 作 ， 
”判断 游戏 是 否 结束 ( 即 是 否 击 沉 了 所 有 的 战舰 ) 。 


记录 狂 测 着 开 火 的 次 数 


下 一 项 任务 很 简单 : 为 记录 猜测 次 数 ， 只 需 在 玩家 每 次 猜测 时 都 将 
属性 guesses 加 1。 你 将 看 到 ， 我 们 决定 在 玩家 的 猜测 无 效 时 ， 不 
增加 猜测 次 数 。 

接 下 来 ， 我 们 将 调用 model1 对 象 的 方法 fire， 让 模型 根据 当前 猜测 
更 新 自己 。 毕 帝 ， 玩 家 进行 猿 测 的 目的 是 要 开火 ， 并 希望 击 中 战舰 。 
别 忘 了 ， 方 法 fire 将 一 个 字符 串 作 为 参数 ， 其 中 包含 行 号 和 列 号 ， 
而 要 获得 这 个 字符 串 ， 可 调用 parseGuess。 非 常 方便 。 


下 面 将 这 些 整合 起 来 ， 以 实现 下 一 项 职责 : 























Hb 
AL 


2 实 全 
= 口 


必用 


游戏 何 时 结束 


Var controller = { 


guesses: 0, 


名 
别 忘 了 ， this.guessest++ 痊 





processGuess: function(guess) { 如 果 玩 家 的 猜测 有 效 ， 属 性 guesses 加 1， 其 工 作 原 
var location = parseGuess (guess); 就 将 guesses 加 1 , 理 与 答 环 中 的 i++ 完全 相同 。 
if (location) { 

this.guessestt+; p> es 请 注意 ， 如 果 玩 家 输入 的 
游戏 极 位 置 无 效 ， 我 们 不 
var hit = model.fire(location); 会 惩罚 玩家 不 计 入 猪 
ee 测 次 数 。 
接 下 来 ， 我 们 以 字符 串 的 方式 将 行 号 和 列 号 传递 
}， 给 model 对 象 的 方法 fire。 别 筷 了 ， 仅 当 击 中 了 战 
舰 时 ， 方 法 fire 才 返回 true。 


判断 游戏 是 否 结 束 

现在 余下 的 全 部 工作 就 是 判断 游戏 是 否 结束 。 如 何 判断 呢 ? 我 们 知道 ， 三 艘 战舰 
都 被 击 沉 上 时， 游戏 便 结 束 『 了 。 因 此， 每 次 击 中 战舰 时 ， 我 们 都 使 用 属性 model. 
shipsSunk 人 确定 击 沉 的 战舰 数 是 否 为 三 艘 。 为 让 代码 更 通用 些 ， 我 们 不 将 这 个 属 
性 与 数字 3 进行 比较 ， 而 是 将 其 与 nodqe1 对 象 的 属性 numShips 进 行 比较 。 这 样 ， 
当 你 以 后 决定 修改 战舰 数 (如 改 为 2 或 4) 时 ， 就 无 需 修改 这 些 代 码 了 。 








Var controller = { 


guesses: 0, 


processGuess: function(guess) { 


如 果 击 中 了 战 秽 ， 且 击 训 的 战 需 数 与 游 
戏 包含 的 战 钢 数 相等 ， 就 向 玩家 显示 一 
-can 条 消息 ， 指 出 他 击 沉 了 所 有 的 战舰 。 


this.guessestt; 
Var hit = model.fire(location); 2 
=== model.numShips) { 


It (hit && model.shipsSunk === 


var location = parseGuess(guess); 


view.displayMessagel("You sank all my battleships, in " + 


this.guesses + " guesses"); 


} 我 们 还 同 玩家 指出 ， 他 经 过 多 少 次 猜测 】 
} 就 击 沉 了 所 有 的 战 靓 。 其 中 的 guesses 
) 是 this 对 象 ( 即 controller 对 象 ) 的 一 本 
属性 。 





请 在 文件 battleship.js 中 输入 控制 怖 





的 所 有 代码 ， 再 闫 加 一 些 对 控制 露 


进行 测试 的 函数 调用 代码 。 然 后 ， 重 新 加 载 网 页 battleship.html， 注 意 
到 游戏 板 上 将 显示 战舰 和 MISS 图 像 。 这 些 图 像 所 处 的 位 置 正确 吗 ? 要 
查看 我 们 使 用 的 测试 代码 ， 请 下 载 battleship_testerjs。 


癌 样 ， 夫 获得 这 里 所 示 的 结果 ， 必须 删除 或 注释 掉 以 前 
的 测 Oo battleship_testerjs 演 示 了 如 何 这 样 做 。 


controller.processGuess("A0"); 


controller.processGuess("A6"); 
controller.processGuess("B6"); 


controller.processGuess("C6"); 


controller.processGuess("C4"); 
controller.processGuess("D4"); 


controller.processGuess("E4"); 


controller.processGuess("BO"); 
controller.processGuess("B1"); 


controller.processGuess("B2"); 


人 调用 controller 对 象 的 方法 processGuess， 


并 传 入 由 一 
测 位 置 。 


ge 


玩家 击 帝 全 部 三 艘 战舰 后 


个 字母 和 一 个 数字 组 成 的 狂 


， 我 们 会 通过 消息 区 域 告诉 玩家 游戏 结 


了 ， 但 玩家 还 可 以 接着 猜 测 . 该 如 何在 玩家 击 帝 全 部 战舰 后 蓉 止 输入 


青 测 ， 从 而 修复 这 个 问题 呢 ? 
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从 表单 中 获取 值 


获取 玩 尔 的 猜测 


实现 游戏 的 核心 辽 辑 和 显示 功能 后 ， 需 要 让 玩家 输入 猜测 并 获取 玩 
家 的 猜测 ， 这 样 玩家 才能 真正 地 玩 这 个 游戏 。 你 可 能 还 记得 ， 我 们 
已 经 在 HTML 中 包含 了 一 个 用 于 输入 猜测 的 <form> 元 素 ， 但 如 何 
将 其 与 游戏 关联 起 来 呢 ? 


为 此 ， 需 要 一 个 事件 处 理 程序 。 本 书 前 面 简要 地 讨论 了 事件 处 理 程 
序 ， 下 面 来 使 用 它们 让 游戏 能 够 正常 运行 ， 有 关 事件 处 理 程序 的 详 
细 内 容 将 在 下 一 章 介绍 。 这 里 的 目标 是 ， 让 你 对 事件 处 理 程序 和 表 
单元 素 如 何 协同 工作 有 大 致 的 认识 ， 而 不 要 求 你 现在 就 对 事件 处 理 这 是 我 们 的 HTML 表 单 ) 
程序 了 如 指 掌 。 元 素 ， 可 用 于 获取 用 


户 输入 。 
情况 大 致 古 这 样 的 : 

















@) 玩家 输入 猜测 并 单 击 Fire! 按 钮 ， 
@ Firel 按 钮 被 单 击 时 ， 和 将 调 周一 个 预先 指定 的 事件 处 理 程序 ; 


图 达 不 事件 处 理 程序 获取 表单 中 的 玩家 输入 ， 关 将 其 交 给 控制 器 。 


G) 


function handleFireButton() { 


// 获取 表单 中 的 玩家 输入 并 交 给 控制 器 

















| 
综合 心 用 


如 何 给 Firel 按 钮 添加 事件 处 理 程序 


为 实现 这 些 功 能 ， 需 要 给 Fire! 按 钮 添加 一 个 事件 处 理 程 序 。 为 此 ， 首 先 需 要 根据 
这 个 按钮 的 id 获 得 一 个 指 问 它 的 3| 用 。 再 来 看 看 HTML， 你 将 发 现 Fire! 按 钮 的 id 为 
fireButton。 知 道 按钮 的 id 后 ， 只 需 调 用 document.getElementById 就 可 葡 
得 指 癌 它 的 ?| 用 。 有 了 指 癌 按钮 的 5 上 用 后 ， 束 可 将 其 属性 onclLick 设 置 为 一 个 事 
件 处 理 程序 ， 如 下 所 示 : 

需要 将 这 些 代码 放 在 一 个 地 方 ， 因 此 

我 们 创建 一 个 名 为 init 的 函数 。 首先 ， 使 用 Fire! 控 钮 的 id 获 
Po 取 一 个 指向 它 的 引用 。 











function init() { 
var fireButton = document.getElementById("fireButton"); 
fireButton.onclick = handleFireButton; 万 一、 然后 ， 给 这 个 按钮 添加 单 击 事件 
} 处 理 程序 handleFireButton。 
别 忘 了 定义 函数 handleFireButton。 
人 这 是 函数 handleFireButton。 每 当 玩 家 
function handleFireButton() { 


// 从 表单 中 获取 值 的 代码 我 们 马上 就 会 编写 这 些 代码 。， 


,ndow onload - init ”第 6 章 介绍 过 ， 我 们 希望 浏览 器 
We 在 网 页 加 载 完毕 后 执行 范 数 init。 


Ee 电信 < i 

获取 表单 中 玩 角 的 猜测 

开火 是 通过 单 击 Fire! 按 钮 发 起 的 ， 但 玩家 的 猜测 包含 在 表单 元 素 guessInput 
中 。 要 获取 这 个 表单 元 素 中 的 值 ， 可 访问 其 属性 value， 如 下 所 示 : 


首先 ， 使 用 这 个 表单 元 素 的 id (guesslnput) 
来 获取 一 个 指向 它 的 引用 。 
function handleFireButton() { 


var guessInput = document.getElementById("guessInput"); 
然后 ， 从 这 个 表单 元 素 中 获取 


var guess = guessInput.value; < 一 猜测 ， 它 存 储 在 这 个 表单 元 到 
} 的 属性 value 中 。 


获取 猜测 后 ， 就 可 以 使 用 它 了 。 我 们 已 
经 编写 了 大 量 使 用 它 的 代码 ， 下 面 就 将 
它 交 给 这 些 代码 。 
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测试 控制 器 


A 和 在 
将 输入 交 给 控制 器 
下 面 来 将 代码 关联 起 来 。 我 们 有 一 个 控制 器 ， 它 急 不 可 耐 地 想 获 取 玩 


家 的 猜测 。 
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我 们 只 需 将 玩家 的 猜测 交 给 控制 蔡 即 可 ， 如 下 所 示 : 


function handleFireButton() { 


var guessInput 


document .getElementById("guessInput"); 


var guess = guessInput.value; 


controller.processGuess (guess); ~ 


guessInput.value 


我 们 将 玩家 的 猜测 交 给 控制 器 ， 然 后 
一 切 就 像 魔术 一 样 发 生 了 | 


WTIT 。 
r 


这 行 代 码 将 表单 输入 元 素 的 值 重 置 为 空 字符 
串 。 这 样 ， 玩 家 再 次 猜测 时 ， 就 无 需 选 择 并 
删 际 前 一 次 的 猜测 了 ， 和 否则 将 让 玩家 很 恼火 。 


这 不 仅仅 是 试 畔 ， 终 于 可 以 好 好 地 玩 这 款 游 戏 了 ! 请 将 所 有 的 代 
码 都 添加 到 battleship.js 中 ， 再 在 浏览 器 中 重新 加 载 battleship.html。 
当前 ， 战 舰 的 位 置 是 以 硬 编码 的 方式 指定 的 ， 因 此 你 很 清楚 如 何在 
游戏 中 获胜 。 下 面 列 出 了 获胜 的 招式 ， 但 务必 对 代码 进行 详尽 的 测 
试 : 输入 不 能 击 中 战舰 的 猜测 、 无 效 的 猜测 以 及 显然 是 错误 的 猜测 。 


A 

| 执 一 这些 是 获胜 的 招式 ， 它 
们 是 近战 需 排 列 的 ， 但 

ce 不 必 宛 全 挖 这样 的 顺序 
进行 猜测 。 请 党 试 输入 

下 其 他 的 猜测 ， 在 这 些 儿 

测 之 问答 入 无 效 的 猜测 

以 及 无 法 击 中 战 需 的 儿 
测 。 这 对 质量 保证 测试 
来 说 不 可 或 缺 。 

BO0 

Bl 

B2 





2 衬 


全 


= 口 


编码 技巧 


每 次 猜测 时 ， 玩 家 都 必须 单 击 Fire! 按 钮 ， 是 不 是 很 傻 ? 单 击 确实 管用 
但 这 种 做 法 既 不 快捷 也 不 方便 。 如 果 玩 家 只 需 按 回 车 键 就 行 ， 是 不 是 
容易 得 多 ? 下面 是 处 理 按 回 车 键 事件 的 代码 : 





function init() { 
var fireButton = document.getElementById("fireButton"); 
fireButton.onclick = handleFireButton; 
var guessInPut = document.getElementById("guessInput"); 


guessInput.onkeypress = handleKeyPress; 


人 添加 一 个 新 的 处 理 程序 ， 用 于 处 理 
HTML 输 入 字段 的 按键 事件 。 


是 按键 事件 处 理 程序 。 每 当 用 浏览 器 向 事件 处 理 程序 传递 一 个 
户 在 这 个 ee 事件 对 象 ， 其 中 包含 有 关 用 户 控 
都 将 调用 这 个 处 理 程 ) 下 了 哪个 键 的 信息 。 


function handleKeyPress(e) { 
var fireButton = document.getElementById("fireButton"); 


If (e.keyCode === 13) { 
fireButton.click(); sw 如 采用 户 按 下 的 是 回 车 键 ， 事 件 对 
return falLse:; 象 的 属 性 keyCode 将 为 15。 在 这 种 情 
} 况 下 ， 我 们 希望 Fire! 按 钮 就 像 自 已 
) \ 被 单 击 一 样 行事 。 为 此 ， 我 们 调用 
fireButton 的 方法 click， 让 它 以 为 忻 己 
我 们 返回 false， 让 表单 不 做 被 单 击 了 。 


其 他 任何 事情 (如 提交 ) 。 


请 更 新 你 的 jnit 函 数 ， 并 在 代码 中 添加 函数 handleKeyPress (任何 
地 方 都 可 以 ) 。 重 新 加 载 网 页 ， 开 始 游戏 吧 ! 
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必用 
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规划 战舰 的 位 置 


还 有 哪些 地 方 有 要 处 理 呢 ? 哦 ， 讨 厌 ， 
战舰 位 置 是 以 硬 编 码 方 陈 指 足 的 


至 此 ， 你 创建 了 一 个 基于 训 览 红 的 游 戏 。 它 虽然 只 包含 少量 的 
HTML、 几 幅 图 像 和 100 行 左右 的 JavaScript 代 码 ， 却 非常 惊艳 。 然 
而 ， 这 款 游 戏 有 一 个 地 方 不 太 令 人 满意 ， 那 就 是 每 次 玩 游戏 时 ， 战 
舰 都 位 于 相同 的 位 置 。 你 还 需要 编写 一 些 代 码 ， 在 每 次 开始 新 游戏 
时 随机 地 放置 战舰 否则 这 区 游戏 就 太 无 趣 了 。 


这 样 做 之 前 ， 我 们 想 让 你 知道 ， 介 绍 这 些 代 码 时 ， 我 们 将 稍微 加 快 
点 步伐 ， 因 为 你 阅读 和 理解 代码 的 能 力 更 强 了 ， 而 且 这 些 代 码 也 没 
有 太 多 新 东西 。 下 面 就 开始 吧 。 需 要 考虑 的 因素 如 下 。 














我 们 获得 了 一 稻 战 议 是 另 一 艘 战舰 的 位 置 。 
舰 的 位 置 。 


每 钥 战 观 的 位 置 
都 不 能 与 其 他 战 
舰 的 位 置 重 党。 


一 
战舰 可 水 平 放置 ， 
也 可 垂直 放置 。 


但 这 种 位 置 不 可 行 ， 因 为 它 与 
一 租 既 有 战舰 重 亚 或 碰撞 了 。 
必须 重新 放 壮 这 艘 战舰 。 





第 三 靓 战 舰 的 这 
个 位 置 可 行 。 


代 效 冰 菠 巾 


下 面 是 一 系列 散乱 的 冰箱 贴 ， 请 将 它们 按照 正确 的 顺序 放置 ， 组 成 一 个 生成 战舰 
位 置 的 算法 。 继 续 往 下 阅读 前 ， 请 查看 本 章 末尾 的 答案 。 


| nn 
s 不 过 是 一 种 花 噶 的 说 为 新 战舰 生成 随机 位 


让 是 一 系列 
法 ， 其 实 指 的 就 十 


一 





银 决 问题 的 步骤 。 执行 循环 ， 循 环 次 数 
等 于 要 创建 的 战 裔 数 。 


为 新 战舰 生成 随机 方向 


(垂直 或 水 平 ) 。 


将 新 战舰 加 入 到 ships 数 组 中 。 


检查 新 战舰 的 位 置 
舰 的 位 置 是 否 与 8 
有 战 角 的 位 置 冲 oe 
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放置 战舰 的 方法 


如 何 放 置 战 舰 


在 游戏 板 上 放置 战舰 时 ， 需 要 芳 虑 的 因素 有 两 个 。 首 先 ， 战 舰 可 水 平 放 置 ， 也 可 垂直 
放置 。 其 次 ， 战 舰 在 游戏 板 上 不 能 彼此 重合 。 我 们 将 编写 处 理 这 两 种 约束 的 代码 。 前 
面 说 过 ， 我 们 不 会 详尽 地 介绍 这 些 代 码 ， 但 你 具备 理解 这 些 代码 所 需 的 全 部 知识 。 只 
要 伦 足 够 的 时 间 ， 你 就 能 理解 这 些 代 码 的 每 个 细 市 ， 因 为 其 中 设计 的 所 有 内 容 部 在 本 
书 前 面 介绍 过 (有 一 项 例外 ， 我 们 将 详细 讨论 ) 。 我 们 开始 吧 。 


我 们 将 把 这 些 代 码 组 织 为 nodae1 对 象 的 三 个 方法 。 
generateShipLocations: 这 是 主 方法 ， 它 创建 node1 对 象 中 的 snips 数 
组 ， 其 中 包含 的 战舰 数 由 modqe1 对 象 的 属性 numShips 指 定 。 
@。 generateShip: 这 个 方法 创建 一 稻 上 成 舰 ， 并 指定 其 在 游戏 板 中 的 位 置 。 指 定 
的 位 置 可 能 与 其 他 战舰 重 登 ， 也 可 能 不 重 登 。 
@ Col1ision: 这 个 方法 将 一 舰 战舰 作为 参数 ， 并 判断 它 古 否 与 游戏 板 中 既 有 的 
战舰 重合 。 











方法 generateShipLocations 


首先 来 实现 方法 generateShipLocations。 这 个 方法 使 用 循环 不 断 地 创建 战舰 ， 
直到 在 mode1 对 象 的 数组 snhips 中 添加 足够 数量 的 战 觅 。 在 每 次 循环 中 ， 都 使 用 方法 
generateShip 生 成 一 艘 新 战舰 ， 并 使 用 方法 colli sion 来 确保 不 与 其 他 战舰 重合 。 如 
末 发 生 重合 ， 就 将 战舰 扔 挥 ， 并 接着 尝试 。 

需要 注意 的 一 点 是 ， 在 这 些 代码 中 ， 我 们 将 使 用 一 种 新 的 迭代 器 一 do while 循 环 。do 
while 循 环 的 工作 原理 与 while 循 环 几乎 相同 ， 只 是 先 执行 循环 体 中 的 语句 ， 再 检查 循环 
条 件 。 对 于 有 些 逻 辑 条 件 ， 使 用 do while 循 环比 使 用 whi1le 人 循环 更 合适 ， 但 是 这 样 的 情 
况 很 少见 。 


我 们 将 在 model 对 象 中 添加 这 个 方法 。 








generateShipLocations: Eunction() { 循环 次 数 与 要 为 其 生成 
var locations; 位 置 的 战舰 数 相同 。 
for (var i = 0; i < this.numShips; I++) { 生成 战 珊 占 据 的 一 系列 位 置 
0 0 
这 里 使 用 locations = this.generateShip(); 并 检 查 这 些 位 置 与 游戏 板 中 既 有 战 靓 的 
了 do while } while (this.collision(locations)); < 一 位 旺 是 否 重 重 。 如 果 重 营 ， 就 需要 再 次 
箱 环 ! this.ships[i].locations = locations; 为 下 不 断 地 生成 新 位 置 ， 直 到 不 重 莹 


} 
生成 可 行 的 位 置 后 ， 0 


}, 0 
5hips 中 相应 战舰 的 属性 locations。 














编写 方法 generateShip 


方法 generateShip 创 建 一 个 数组 ， 其 中 包含 一 盘 战 舰 的 随机 位 置 ， 而 不 
关心 战舰 是 否 与 游戏 板 中 的 其 他 战舰 重合 。 我 们 将 用 分 两 步 来 实现 这 个 方 生成 随机 数 O 或 7 
法 。 第 一 步 为 战舰 随机 地 选择 方 旬 :水平 还 是 垂直 的 ?我 们 将 用 一 个 随机 有 点 像 描 硬 币 。 
数 来 决定 这 一 点 : 如 果 这 个 随机 数 为 1， 战 舰 将 是 水 平 的 ， 如 果 为 0， 战 舰 
将 是 垂直 的 。 我 们 将 使 用 老 朋 友 Math.random 和 Math.floor 像 以 前 一 样 
来 完成 这 项 任务 。 





使 用 Mathrandom 来 生成 一 个 0 一 1 的 
随机 数 ， 再 将 结果 乘 以 2， 得 到 一 41 
这 个 方法 也 将 添加 到 model 对 象 中 。 站 (但 不 包括 2) 多 了 机 妆 ， 外 
\ K 
6 Ee 后 ， 使 用 Math.floor 将 这 1 所 放 ( 妇 
换 为 0 或 1。 





var direction = Math.floor(Math.random() * 2); 


var row, col; 


如 果 direction 为 1， 就 意味 着 
if (direction === 1) { > 去 创建 一 稻 水 平 放置 的 战舰 。 


// 生成 水 平 战舰 的 起 始 位 置 
} else 1 如 果 direction 为 O， 就 意味 着 要 


创建 一 条 垂直 放置 的 战舰 。 
// 生成 垂直 战舰 的 起 始 位 置 


} 
我 们 将 首先 生成 新 战舰 的 起 始 位 置 ， ,) 
row =O 和 column =3。 我 们 需要 根据 战 
舰 的 方向 使 用 不 同 的 规则 来 生成 起 始 位 
置 (其 中 的 原因 将 在 稍 后 介绍 ) 。 为 创建 新 战舰 的 locations 属 性 ， 我 们 首先 创 
上 建 一 个 空 堵 组， 再 在 其 中 加 一 深 加 位 六 。 
Var newShipLocations = []; 我 们 使 用 一 个 循环 ， 其 循环 
for (var i = 0; i < this.shipLength; it+) { 4 次 数 为 战 钢 占 据 的 单元 格 数 。 


If (direction === 1) { *. 
0 AL 一 、 在 每 次 循环 中 ， 都 在 烙 
// 在 水 平 战舰 的 位 置 数组 中 添加 位 置 组 newShipLocations 中 冰 
} else 1 加 一 个 单 元 格 。 Ra 
是 \ [e) 
// 在 垂直 战舰 的 位 置 数组 中 添加 位 置 L 下 ee 
成 单元 格 。 


} 人 玉生 成 所 有 的 位 置 后 ， 
return newShipLocations; 返回 这 个 数组 。 我 们 将 从 下 一 页 开始 补 

~ 口 
时 全 余下 的 代码 。 


你 现在 的 位 置 ， 


计算 战舰 的 位 置 


3 人 » 了 
生成 新 战舰 的 起 始 位 置 
知道 战舰 的 方向 后 ， 就 可 以 为 其 生成 位 置 了 。 我 们 将 首先 生成 起 始 位 置 (战舰 
占据 的 第 一 个 单元 格 ) : 如 果 战 舰 是 水 平 的 ， 余 下 的 位 置 将 为 下 两 列 相 应 的 单 
元 格 ， 如 果 战 舰 是 垂直 的 ， 余 下 的 位 置 将 为 下 两 行 相应 的 单元 格 。 
为 此 ， 需 要 生成 两 个 表示 战舰 起 始 位 置 的 随机 数 ， 一 个 为 行 号 ， 另 一 个 为 列 
号 。 这 两 个 随机 数 都 必须 在 0 和 6 之 间 ， 这 样 才 能 确保 战舰 位 于 游戏 板 内 。 但 别 
忘 了 ， 如 果 战 舰 是 水 平 放置 的 ， 那 么 起 始 列 号 必须 在 0 和 4 之 间 ， 这 样 才能 确保 
整个 战舰 都 在 游戏 板 内 。 











ee 


row = Math.floor(Math.random() * this.boardSize); 


C 


但 起 始 列 号 必须 确保 整个 

战舰 都 位 于 游戏 板 内 。 因此 ， 我 们 将 poard5ize (7) 
减 去 5， 确保 起 始 列 号 在 0 和 
4 之 间 。 别 忘 了 ，board5ize 是 
model 对 象 的 一 个 属性 。 


col = Math.floor(Math.random() * (this.boardSize - 3)); 





同 理 ， 如 末 战 有 靓 是 焉 下放 管 的 ， 起 始 行 吕 就 必须 在 0 和 4 
之 则 ， 这 样 才能 确保 整个 战舰 都 在 游戏 板 内 。 


个 
竹 让 战舰 的 起 始 行 号 必须 为 0 一 4， 这 样 才能 确保 政和 战 


舰 都 位 于 游戏 板 内 …… 


| | I row = Math.floor(Math.random() * (this.boardSize - 3)); 
> = Math.floor(Math.random() * this.boardSsize); 


一 一 一 一 一 一 竹 -、 但 战舰 可 位 于 任何 一 列 中 . 





| 
综合 心 用 


完成 方法 generateShip 的 编写 工作 


插入 前 一 页 所 示 的 代码 后 ， 余 下 的 唯一 工作 就 是 将 起 始 位 置 和 接 下 来 的 两 个 单 
元 格 添 加 到 数组 newShipLocations 中 。 


generateShip: function() { 
var direction = Math.floor(Math.random() * 2); 


var row, Col; 、 _ 
这 些 代 码 生成 战 靓 在 游戏 
板 中 的 起 始 位 置 。 
if (direction === 1) { 

row = Math.floor(Math.random() * this.boardSize); 


Math.floor(Math.random() * (this.boardSize - this.shipLength)); 


Col 


} else { 
row = Math.floor(Math.random() * (this.boardSize - this.shipLength)); 


col = Math.floor(Math.random() * this.boardSize); 全 本 页 的 数字 3 替换 成 了 this5， 
shipLength， 让 
持 任何 战 秽 长 度 。 
Var newShipLocations = []; 


for (var i = 0; i < this.shipLength; i++) { 





if (direction === 1) { 文 里 使 用 圆 括号 确保 先 将 iicol 
这 是 生成 水 平 战舰 位 置 的 代码 。 相 加 ， 再 将 结果 转换 为 字符 串 。 
下 面 来 分 别 阐述 其 各 个 部 分 …… 
newShipLocations.push(row + "" + (col + 1)); 
、 个 二 本 和 有 列 号 (起 始 列 号 +i) 组 成。 第 一 次 答 
将 一 个 新 位 置 压 入 数组 这 个 位 置 是 一 个 字符 串 ， 环 时 ，| 为 0， 因 此 列 号 为 起 始 列 号 ， 第 二 次 
newShipLocations。 由 行 写 ( 刚才 计算 得 循环 时 ， 为 下 一 列 ; 而 第 三 次 循环 时 ， 为 
到 的 起 始 行 号 ) …… 再 下 二 列 。 因 此 ， 这 个 数组 将 存储 类 似 
于 “O14” “O02” 和 “O03” 的 数据 。 
} else { 
newShipLocations.push((row + i) + "" + col); 
交行 二 操作 与 前 面 类 人 人 对 于 生 直 战舰 ， 这 个 数组 将 存储 类 似 
似 ， 只 是 针对 的 是 垂 因此 ， 每 次 循环 时 ， 都 将 于 “31” “41” 和 “51 的 数据 。 
直 战 舰 行 号 (而 不 是 列 号 ) 加 i。 


} 别 忘 了 ， 将 字符 串 和 数字 相 加 
“一 a 时 ，+ 表 示 拼接 而 不 是 加 法 运算 ， 

， ”从 、 使 用 成 冕 的 位 置 填充 这 个 数 四 此 结果 为 一 个 字符 串 。 
return newShipLocations; 组 后 ， 将 其 返回 给 调用 方法 


}, generateShipLocations。 
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collision 方 法 


[A 2 6&3 

千 免 三 担 [一 可 知道 我 们 在 什么 地 方 调用 了 方 过 
方法 col11ision 将 战舰 的 位 置 作为 参数 ， 并 检查 这 些 位 置 是 否 与 游戏 板 中 既 有 collision， 请 回 过 头 去 看 第 364 由 。 
的 战舰 重合 (或 碰撞 ) 。 

为 实现 这 种 功能 ， 我 们 使 用 了 两 个 通 套 循环 。 外 部 循环 迭代 模型 (属性 

model.ships) 中 所 有 的 战舰 ， 而 内 部 循环 迭代 新 战舰 的 所 有 位 置 (存储 在 数 

组 locations 中 ) ， 并 检查 这 些 位 置 是 否 被 游戏 板 中 既 有 的 战舰 占据 。 














locations 是 一 个 数组 ， 存 储 了 
我 们 要 放置 到 游戏 板 中 的 新 战 
舰 的 位 置 。 


collision: function(locations) { 


for (var i = 0; i < this.numShips; i++) { 一 迭代 游戏 板 中 既 有 的 每 租 战 
var ship = model.ships[il]; 检查 新 战舰 的 locations 数 组 中 的 位 置 是 
for (var J] = 0; j < locations.length; j++) “0 否 包含 在 既 有 战舰 的 locations 数 组 中 。 
If (ship.locations.indexOf(locations[j]) >= 0) { 


return true; 


Se 为 检查 位 置 是 否 被 耻 有 战舰 占据 ， 我 们 使 用 


代 An 部 循环 到 加 ， 这 将 了 index0Of。 如 果 返 回 的 索引 大 于 或 当 等 于 O， 
} 立即 终止 两 个 循环 ， 退 就 说 明 这 个 位 置 已 被 婚 有 战舰 占据 ， 因 此 衣 
} 出 函数 并 退回 true。 true (这 意味 着 发 生 了 碰撞 ) 。 


return false; 
人 如 果 执 行 到 了 这 里 ， 就 说 明 我 们 检 


查 的 所 有 位 置 都 未 被 占据 ， 因 此 逝 
@false (这 意味 着 没有 发 生 碰撞 ) 


ge 


O 


上 述 代码 包含 两 个 循环 ， 外 部 循环 和 内 部 循环 。 前 者 迭代 模型 中 的 所 有 战 
舰 ， 而 后 者 迭代 要 检查 冲突 的 所 有 位 置 。 在 外 部 循环 中 ， 我 们 使 用 了 循环 
变量 1 ， 而 在 内 部 循环 中 ， 我 们 使 用 了 循环 变量 j。 为 何 要 使 用 两 个 不 同 的 
循环 变量 呢 ? 
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综合 应 用 


最 后 两 项 修改 


为 战舰 生成 随机 位 置 的 代码 都 编写 好 了 ， 余 下 的 唯一 工作 就 是 整合 它们 。 完 成 
最 后 两 项 代码 修改 后 ， 就 可 对 这 丈 新 战舰 游戏 进行 试 克 了 | 


var model = { 


} 


boardSize: 7， 

numShips: 3, 

shipLength: 3, 删除 以 硬 编码 方式 指定 
shipsSunk: 0, 人 一 战舰 位 置 的 代码 。 


/ 8 r 8 8 A 


ships: [ { locations: [0, 0, 0], hits: ["", "", ""] }, 将 位 置 数组 的 元 素 
Le 7 Wa Fs £ 


{ locations: [0, 0, 0], hits: 都 初始 化 为 O 


{~ locations: [0 0 Ol hitese TT wo ne 
fire: function(guess) { ... }, 
isSunk: function(ship) { ... }, 
generateShipLocations: function() { ... }, 
generateShip: function() { ... }, 


collision: function(locations) { ... } 


function init() { 


var fireButton = document.getElementById("fireButton"); 
fireButton.onclick = handleFireButton; 
var guessInput = document.getElementById("guessInput"); 


guessInput.onkeypress = handleKeyPress; 


/ 白人 FS ‘ 
model.generateShipLocations(); 《一 本 用 上 
yA 的 四 议 。 \ 必 | 四 议 舍 
) 修改 模型 中 的 空 数组 。 


我 们 在 函数 init 中 调用 model.generateShipLocations， 
以 便 在 网 页 加 载 完毕 后 修改 这 些 数组 。 这 样 ， 当 
和 开始 玩 游戏 时 ， 所 有 战舰 的 位 置 已 准备 就 绪 。 


别 所 了， 你 可 前 往 http://wickedlysmart.cormyhfjs 下 载 这 款 
战舰 游戏 的 完整 代码 。 
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测试 战舰 游戏 





企 最 后 一 次 试 驾 中 ， 测 试 的 是 真正 的 游戏 ， 其 
中 的 战舰 位 置 是 随机 的 。 将 所 有 代码 都 添加 到 
battleship.js 中 ， 在 浏览 器 中 重新 加 载 battleship. 
html， 并 开始 游戏 ! 请 进行 详尽 的 测试 : 多 玩 
几 次 ， 每 次 都 重新 加 载 网 页 ， 以 生成 不 同 的 战舰 
位 置 。 


Wm 






如 何必 办 
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要 作 次 ， 可 打开 开发 控制 台 ， 和 输入 
model.ships 并 按 回 车 。 你 将 看 






JavaScript 控 制 台 2 


> model .ships 








到 三 个 战舰 对 象 ， 它 们 都 包含 数组 。 [ee a a 

16caticongtlhite., 这 样 你 就 有 hits: Array[3], hits: Array[3], hits: Array[3] 

了 内 幕 消 息 ， 知 道 战舰 都 位 于 游戏 locations: Array[3], locations: Array[3], locations: RaY 
Ee 六 ; "63" 20n 0: "60" 

板 的 什么 地 方 。 不 过 ， 这 种 内 部 消 人 








恩 可 不 是 我 们 透露 出 来 的 | 2; "65， 2: "22" 2: "62" 





每 次 都 能 打败 计算 机 。 








cb OO -二 


秽 色 你， 该 创业 了 




















你 创建 了 一 个 出 色 的 Web 应 用 程 
序 ， 它 包含 大 约 150 行 代码 ， 还 有 
一 些 HTML 和 CSS。 我 们 说 过 ， 这 
些 代 码 都 是 你 的 ， 现在 只 要 制作 一 
份 漂亮 的 商业 计划 书 ， 你 就 能 拿 到 风 

险 投 资 了 。 有 这 样 的 好 事 ， 谁 愿意 错过 
呢 ? 


经 过 一 番 艰 苦 努 力 ， 你 该 放松 一 
下 ， 玩 几 盘 战舰 游戏 了 。 很 是 引 人 
入 胜 ， 不 是 吗 ? 


不 过 ， 这 才刚 刚 开 始 ， 还 有 
一 些 强 大 的 JavaScript 功 能 
需要 学 习 。 它 们 能 让 你 编写 
的 应 用 程序 与 使 用 其 他 语言 
编写 的 应 用 程序 妃 3 


在 本 章 中 ， 你 编写 了 大 量 的 代码 ， 
现在 美美 地 吃 一 顿 ， 好 好 地 休息 一 
下 ， 让 这 些 知 识 都 沉 入 脑海 中 。 不 
过 在 此 之 前 ， 还 有 一 些 要 点 需要 复 
习 ， 还 有 一 个 填 字 游戏 需要 完成 。 千 
万 不 要 跳 过 它们 ， 重 复 是 充分 理解 
知识 的 良 方 ! 
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当 
bel 


~ 


保证 





QA 记录 


二 一 

三 二 

三 二 

二 El 击 中 战 钢 
二 后 ， 10 有 果 机 次 输入 这 个 位 和 将 
3 三 次 击 中 战舰 的 这 个 部 外 试 试 
= 你 就 明 自 了 : 


-3 议 是 pugo 换 句 话说 ， 正确 的 行 
A t0 果 这 是 bug， 
该 如 何 修复 ! 二 在 下 国 写 (6 
解决 方 染 。 









SS 


我 们 使 用 HTML 来 定义 战舰 游戏 的 结 
构 ， 使 用 CSS 来 设置 其 样式 ， 并 使 用 
JavaScript 定 义 其 行为 。 


表格 中 每 个 <td> 元 素 的 id 都 被 用 来 更 
新 该 元 系 的 衣 景 图 像 ， 以 指出 是 售 
中 了 战舰 。 


表单 包含 一 个 类 型 为 putton 的 输入 
(input) 元 素 。 我 们 给 这 个 按钮 指定 

了 一 个 事件 处 理 程序 ， 以 便 玩 家 输入 
青 测 后 ， 我 们 能 够 知道 这 一 点。 

要 获取 表单 中 输入 文本 元 素 中 的 值 ， 

可 使 用 其 value 属 性 。 

使 用 CSS 定 位 可 精确 地 指定 元 素 在 网 页 

中 的 位 置 。 

我 们 使 用 了 三 个 对 象 来 组 织 代码 : 

GgeEl. viewnieontrel ler. 

游戏 中 的 每 个 对 象 都 有 一 项 主要 职责 。 

model 的 职责 是 存储 游戏 的 状态 以 及 

实现 状态 修改 逻辑 。 

view 的 职责 是 在 mode1l 存 储 的 状态 发 

生变 化 时 更 新 界面 。 

controller 的 职责 是 将 游戏 的 各 个 部 分 

整合 起 来 ， 将 玩家 的 猜测 交 给 model 

以 更 新 状态 以 及 判断 游戏 是 否 结 

J 


通过 将 游戏 设计 为 各 司 其 职 的 对 象 ， 
可 独立 地 创建 和 测试 游戏 的 每 个 音 


sa 


为 简化 创建 和 测试 mode1 的 工作 ,我 
们 一 开始 以 硬 编码 的 万 式 指 定 战舰 的 
位 置 。 确 定 mode1 没 有 问题 后 ， 我 们 
将 这 些 硬 编 码 位 置 蔡 换 为 代码 生成 的 
随机 位 置 。 


在 mode1 中 ， 我 们 定义 了 numShips 
和 shipLength 等 属性 ， 避 免 了 在 方 
法 中 使 用 以 后 可 能 需要 修改 的 硬 编码 
值 。 


数组 有 一 个 ijndex0f 方 法 ， 它 类 似 
于 字符 串 的 indqexof 方 法 。 数 组 的 
indqexof 方 法 将 一 个 值 作为 参数 ， 并 
返回 这 个 值 在 数组 中 的 索引 ; 如果 这 
个 值 不 包含 在 数组 中 ， 就 返 回 -1。 


使 用 串 接 ， 可 利用 句点 运算 符 将 对 象 
引用 连接 起 来 ， 从 而 将 多 条 语句 合 而 
为 一 ， 并 避免 使 用 临时 变量 。 

do while 循环 类 似 于 while 和 循环 ， 只 
是 先 执 行 一 次 循环 体 中 的 语句 ， 册 检 


碍 条 件 。 


质量 保证 (QA) 是 代码 开发 过 程 的 重 
要 组 成 部 分 。 它 不 仅 要 求 测试 输入 有 
效 时 的 情形 ， 还 要 求 测试 输入 无 效 时 
的 情形 。 


JavaScript 填 字 游 戏 





横向 

2. 我 们 使 用 哪个 方法 来 设置 元 素 的 class 特 性 ? 

4. 为 在 游戏 板 上 显示 战舰 或 MISS 图 像 ， 我 们 将 这 幅 
图 像 放 在 <tdq> 元 素 的 什么 地 方 ? 

6. 哪 种 循环 的 循环 体 中 的 语句 至 少 会 执行 一 次 ? 

8. 时 苔 的 交互 式 网 页 使 用 HTML、CSS 和 什么 ? 
10. 我 们 使 用 什么 来 表示 游戏 中 的 每 艘 战舰 ? 

11. <tdq> 元 素 的 id 对 应 于 游戏 板 的 一 个 什么 ? 

12. 畏 数 collision 的 职责 是 确保 战舰 不 会 彼 
1 

15. 为 让 模型 根据 玩家 猜测 来 更 新 游戏 的 状态 ， 我 们 
调用 哪个 方法 ? 

17. 谁 负 和 贡 存 储 状 态 ? 

18. 你 可 使 用 什么 来 作弊 ， 以 获取 战舰 的 位 置 ? 
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天 访 JavaScript 烧 党 游戏 


本 章 的 编码 难题 让 你 的 大 脑 备 受 阴 熬 。 请 完成 下 面 的 填 字 游戏 ， 
将 这 种 煎熬 推 铝 高潮。 


台 国 国 绍 国 国 曾 


纵向 

1. 为 获取 表单 输入 元 素 中 的 猜测 位 置 ， 我 们 给 这 个 元 
过 添加 了 一 个 单 击 事件 _。 

3. 串 接 用 于 指向 什么 的 引用 ? 

5. 谁 擅长 将 程序 的 各 个 部 分 整合 起 来 ? 

7. 为 在 游戏 板 中 显示 战舰 图 像 ， 我 们 将 相应 <tdq> 元 素 
的 class 特 性 设置 为 什么 ? 

9. 本 章 的 游戏 包含 三 个 对 象 : model、 controller 
和 什么 ? 

14. 13 是 哪个 键 的 键 码 ? 

16. 谁 在 其 状态 发 生变 化 时 通知 视图 ? 





实弹 演习 带 案 


稍 后 你 将 学 习 如 何 使 用 JavaScript 在 游戏 板 中 添加 MISS 和 战舰 图 像 ， 
但 这 样 做 之 前 ， 你 需要 在 HTML 模 拟 器 中 进行 练习 。 我 们 创建 了 两 个 
供 你 练习 的 C55 类 ， 请 将 这 些 规 则 添加 到 CSS 中 ， 再 假设 战舰 隐藏 在 下 
面 的 位 置 

战舰 1: A6, B6, C6 


战舰 2: C4, D4, E4 务必 下 载 这 个 纺 习 所 器 的 一 
战舰 3: B0, B1, B2 切 ， 包 括 下 面 两 幅 图 像 、 


玩家 依次 输入 了 下 面 的 猜测 ; du “ 


A0, D4, F5, B2, C5, C6 
你 需要 让 表格 中 相应 的 <td> 元 素 归属 于 下 面 两 个 类 之 一 ， 从 而 在 正确 。 所 = 
的 网 格 单元 格 中 显示 MISS 或 战 角 图 像 : MINN 


-hit 1 
background: transparent url("ship.png'") no-repeat center center; 


} 
.miss 1{ 
background: transparent url("'miss.png") no-repeat center center; 


} 


答案 如 下 : 你 应 让 id 为 00、25 和 55 的 <ta> 
元 素 归 属于 miss 类 ， 让 id 为 12、26 和 34 的 
<td> 元 素 归 属于 h it 类。 要 指定 元 素 归 属 
的 类 ， 可 像 下 面 这 样 设 置 cLass 特 性 : 


<td class="miss" id="55"> 


给 正确 的 元 素 指 定 其 所 属 的 
类 后 ， 游 戏 板 应 ce 
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练习 答案 


来 做 一 些 对 象 设 计 工 作 吧 。 我 们 将 从 view 对 象 着 手 。 前 面 说 过 ，vievw 
对 象 负 责 更 新 视图 。 根 据 下 面 的 视图 ， 你 能 确定 view 对 象 需要 实现 哪些 
方法 吗 ? 请 在 下 面 写 出 这 些 方 法 的 声明 〈 这 里 只 考虑 声明 ， 方 法 体 的 代 
码 稍 后 再 考虑 ) ， 并 使 用 一 两 条 注释 指出 每 个 方法 的 功能 。 我 们 为 你 编 
写 了 一 个 方法 的 声明 。 答 案 如 下 。 





e009 Bardeship 
€ C 从 localhost/ -Beth/HFIS/chapte atticship.htm 


这 是 一 条 消息 。 消 
息 为 “HIT! “You 
missed. “You sank 
my battleship! 等， 


在 网 格 中 显示 MI55 
图 像 。 


在 网 格 中 显示 战舰 图 像 。 





< 一 定义 一 个 对 象 ， 并 将 其 赋 给 变量 view。 
var view = { 
// 这 个 方法 将 一 个 字符 串 作 为 参数 ， 并 在 消息 区 域 中 显示 它 
0 function(msg) { 
稍 后 将 编写 的 代码 
}, 


displayHit: function(location) { Bn 在 这 里 声明 你 认为 筑 要 提供 
SS 的 方法 | 


// 这 个 方法 的 代码 


displayMiss: function(location) { 


// 这 个 方法 的 代码 


}, 


上 
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人 Ra 麻 笔 上 阵 
从 案 根据 前 面 对 新 游戏 板 的 描述 ， 你 将 如 何在 模型 中 表示 战舰 呢 ? (只 考虑 它们 


的 位 置 ， 击 中 的 部 位 以 后 再 说 。) 请 从 下 面 选择 最 佳 的 解决 方案 。 


口 像 第 2 章 那样 处 理 战 舰 ， 使 用 9 个 变量 来 存储 “” 口 ”使 用 三 个 数组 ， 每 个 数组 都 包含 3 个 元 素 ， 指 
战舰 占据 的 位 置 。 出 了 一 艘 战舰 占据 的 位 置 。 

口 使 用 一 个 包含 49 个 元 素 的 数组 ， 每 个 元 素 对 名 使 用 包含 三 个 位 置 属性 的 对 象 ship， 并 将 所 
应 于 游戏 板 的 一 个 单元 格 ， 其 中 存储 了 占据 有 的 战舰 都 存储 在 数组 ships 中 。 
了 该 单元 格 的 战舰 的 编号 。 

口 使 用 一 个 包含 9 个 元 素 的 数组 ， 其 中 元 素 0 一 2 





你 也 可 以 在 这 里 列 最 佳 解决 方案 的 过 程 中 ， 我 们 党 试 过 所 有 
出 你 的 解决 方案 。 这 些 解 决 方案 。) 但 本 章 使 用 的 是 这 个 解 


决 方 某 。 
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fs 归 ) 战舰 冰 藉 贴 答案 


假设 玩家 向 下 面 的 位 置 开 火 。 请 根据 表示 战舰 的 数据 结构 ， 将 战舰 和 
MISS 冰 箱 贴 放置 到 游戏 板 的 正确 位 置 。 玩 家 击 沉 了 所 有 的 战舰 吗 ? 我 
一 们 指出 了 玩家 第 一 次 开火 后 的 效果 。 
玩家 向 下 面 的 位 置 开火 : 在 游戏 板 上 指出 玩家 
A6, B3, C4, D1, B0, D4, F0, A1, C6, B1,B2,E4,B6 和 一 这样 开火 的 效 采 。 


答案 如 下 : 2 ~ 
| 

Lodione: 24" O04" T4477], -Desy [Tie™,. Ti", hI] +0, 

| LOTions: [TO0" TIT™ “To Te 


EL 


eh 


余下 的 冰箱 贴 。 
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A 
人 和 糜 笔 上 阵 
A (人 
合 条 下 面 练习 使 用 数据 结构 ships 来 模拟 开火 的 效果 。 假 设 数据 结构 ships 如 下 ， 


请 据 此 回 管 下 面 的 问题 并 补 全 代码 。 这 是 游戏 工作 原理 的 重要 组 成 部 分 ， 请 
务必 查看 本 章 末 尾 的 答案 ， 表 继续 往 下 阅读 。 


var ships = [{ locations: ["31", "41", "51"], hits: ["™, "", ""] }, 


{ locations: ["14", "24", "34"], hits: ["", "hit", ""] }, 
{ locations: ["00", "Ol™ "O27 hits: ["hit", 2 ma] }]; 


哪些 战舰 已 被 击 中 ? 战 岗 2 和 战 现 3 被 击 中 的 是 哪些 部 位 ? C4、AO 
假设 玩家 向 D4 处 开火 ， 会 击 中 战舰 吗 ? 会 如 果 会 ， 击 中 的 是 哪 艘 ? 战舰 2 


假设 玩家 向 B3 处 开火 ， 会 击 中 战舰 吗 ? 不 会 如果 会 ， 击 中 的 是 哪 艘 ? _ 





请 补 全 下 面 的 代码 ， 访 问 第 二 舰 战舰 的 中 间 部 位 ， 并 使 用 console.1og 打 印 其 值 : 


var ship2 = ships[ 1 ]; 
Var locations = ship2.locations; 


console.log("Location is " + locations[ 1 ]); 


请 补 全 下 面 的 代码 ， 检 查 第 三 艘 战舰 的 第 一 个 部 位 是 否 被 击 中 ， 


var ship3 = ships[ 2 ]:; 
var hits = ship3. hits ; 


if (hits[O] === "hit") { 


console.log("Ouch, hit on third ship at location one"); 


请 补 全 下 面 的 代码 ， 指 出 第 一 艘 战舰 的 第 三 个 部 位 被 击 中 : 
var Ship1 = ships[0]; 
var hits = shipl. hits ; 


hits[ 2 ]= hit ; 
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练习 答案 


过 代码 冰箱 贴 管 案 
1 


下 面 是 一 系列 散乱 的 冰箱 贴 ， 请 将 它们 按照 正确 的 顺序 放置 ， 组 成 一 个 生成 战舰 位 置 的 
算法 。 管 案 如 下 。 





执行 循环 ， 循 环 次 数 
等 于 要 创建 的 战舰 数 。 


为 新 战舰 生成 随机 方向 


(垂直 或 水 平 ) ， 


为 新 战舰 生成 随机 位 置 。 


检查 新 战舰 的 位 置 是 否 





与 既 有 战舰 的 位 置 冲突 。 


将 新 战舰 加 入 到 ships 数 组 中 。 





9 异步 编码 


米 
处理 要件 





阅读 完 本 章 ， 你 的 编程 方式 再 不 似 从 前 ”。 到 目前 为 止 , 你 编写 的 
代码 通 第 都 是 按 从 上 到 下 的 顺序 执行 的 。 虽 然 你 的 代码 要 复杂 些 ， 还 使 用 
了 一 些 函 数 、 对 象 和 方法 ,但 从 某 种 程度 上 说 ， 它 们 都 是 按部就班 地 执行 的 。 
然而 ，JavaScript 代 码 通 常 不 是 这 样 编写 的 ， 大 多 数 JavaScript 代 码 都 是 事件 
响应 式 的 。 很 抱歉 到 现在 才 告 诉 你 这 一 点 。 那 么 都 是 什么 样 的 事件 呢 ? 用户 
单 击 网 页 、 通 过 网 络 收 到 数据 、 定 时 如 到 期 、DOM 发 生变 化 每。 事实 上 , 在 
训 蜗 絮 中 ， 幕 后 始终 有 各 种 事件 在 不 断 发 生 。 本 章 将 反思 我 们 的 编码 方式 ， 
学 习 如 何 编写 啊 应 事件 的 代码 以 及 为 何 要 这 样 做 。 





@ 原文 为 “you aren't in kansas anymore”， 出 自 1939 年 电影 《绿野仙踪 》。 一 一 编者 注 
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事件 的 练习 


你 知道 浏览 器 是 做 什么 的 ， 不 是 
帮 所 做 的 远 不 止 这 些 。 


你 没有 把 握 ， 就 尽力 猜 一 猜 吧 。 


L 
L 


L 


[L 





知道 网 页 已 加 载 并 显示 完毕 


跟踪 用 户 在 网 页 上 执行 的 所 有 


单 击 操作 ， 无 论 单 击 的 是 按钮 、 


链接 还 是 其 他 地 方 。 


知道 用 户 提 交 了 表单 。 


知道 用 户 按 下 了 键盘 按键 。 


知道 元 素 多 得 了 用 户 界 面 焦 点 。 


Che、 府 名 上 隆 
NS 


挑选 上 面 列 出 的 两 个 事件 。 如 果 浏 览 需 


| 
转 


[| 


L 


写 哪 些 有 趣 的 代码 来 啊 应 这 些 事件 ? 


吗 ? 它 获取 网 页 及 其 所 有 内 容 ， 峙 泻 染 网 页 。 然 而 ， 浏 览 
它 还 做 什么 呢 ? 你 认为 浏览 喜 还 在 幕后 执行 下 面 哪些 任务 呢 ? 如 果 


监视 所 有 的 鼠标 移动 。 


监视 时 钟 并 管理 定时 器 和 定时 
事件 。 


获取 网 页 所 需 的 额外 数据 。 
跟踪 用 户 缩放 或 滚动 网 页 的 操作 。 


知道 Cookie 已 创建 完毕 


能 够 在 这 些 事件 发 生 时 发 出 通知 ， 你 能 编 


C 当然 ， 你 不 能 选择 与 Cookie 相 关 
的 事件 。 


事件 是 什么 


你 现在 肯定 知道 ， 训 览 合 不 会 在 获取 并 显示 页 面 后 就 甩 手 不 管 了 。 在 医 后 ， 有 很 多 
事情 在 不 断 发 生 : 用 户 单 击 按钮 、 鼠 标 位 置 发 生变 化 、 通 过 网 络 收 到 数据 、 窗 口 大 
小 发 生变 化 、 定 时 故 到 期 、 剖 览 余 位 置 发 生变 化 等 。 这 些 都 会 触发 事件 。 








每 当 有 事件 发 生 时 ， 你 都 可 以 在 代码 中 处 理 它 ， 即 提供 将 在 事件 发 生 时 调用 的 代码 。 


你 不 必 处 理 所 有 的 事件 ， 而 只 需 处 理 目 己 关心 的 事件 。 例 如 ， 发 生 按钮 单 击 事件 时 ， 
你 可 能 想 在 播放 列表 中 添加 一 首 歌曲 ， 收 到 新 数据 时 ， 你 可 能 想 对 其 进行 处 理 并 显 
示 到 网 页 中 ， 定 时 各 到 期 时 ， 你 可 能 想 告 诉 用 户 ， 他 手 上 的 音乐 会 
期 了 ， 等 等 。 





前 排 门票 就 要 过 









是 想 提 和 醒 你 ， 网 页 
刚 加 载 完毕 了 






移动 了 多 远 ， 











网 页 中 的 视频 播放 
缓慢 。 









Web 服 务 对 你 的 请 求 作 出 的 表单 。 


了 响应， 我 已 经 为 你 准备 
好 了 数据 。 


每 当 有 事件 炎 生 轩 ， 你 者 
可 以 在 代 阅 中 处 理 它 





只 是 想 让 你 知道 ,用 户 刚 才 稳 微 
移动 了 一 下 鼠标 。 如 果 你 想 知 道 
我 可 以 告诉 你 。 


用 户 刚 提交 了 网 页 中 


各 
下 
过 


想 了 解 有 关 
定位 和 众 


浏览 器 
多 其 他 的 


N_ 高 级 事件 ， 请 参阅 


《Head First HTML5 
Programming 中文 
呈 》。 本 书 只 介绍 
你 必须 知道 的 重要 
事件 。 


























你 现在 有 的 人 位置 


但 
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事件 处 理 程 序 


事件 处 理 程 序 是 付 径 


我 们 编写 处 理 程序 来 处 理事 件 。 处 理 程序 通 第 十 一 小 段 代 码 ， 











知道 事件 发 生 时 该 如 何 做 。 从 代码 的 角度 说 ， 处 理 程 序 就 是 一 尔 也 许 会 听 到 开发 人 员 称 其 为 
个 函数 。 事 件 发 生 时 ， 其 处 理 程序 函数 将 被 调用 。 《一 @ 调 函 教 或 监听 器 ， 而 非 处 理 


程序 。 
为 让 处 理 程序 在 事件 发 生 时 得 以 调用 ， 你 首先 需要 注册 它 。 你 


将 看 到 ， 注 册 的 方式 有 多 种 ， 具 体 采 用 哪 种 取决 于 事件 的 类 型 。 
后 面 将 深 入 探讨 所 有 这 些 注 册 方 式 ， 现 在 先 来 看 一 个 简单 的 示 
例 。 这 个 示例 你 以 前 见 过 ， 它 就 是 网 页 加 载 完 毕 后 触发 的 事件 。 











浏览 器 ,我 有 一 个 处 理 程 序 ， 
它 包 含 一 些 代 码 ， 要 在 你 加 
载 网 页 后 执行 。 我 跟 你 说 过 
吧 ， 我 挺 着 急 的 。 













于 万 别 着 急 。 放 心 吧 ， 我 让 你 的 处 理 
程序 准备 就 线 了， 加 载 好 整个 网 页 
后 ， 就 一 中 会 汕 财 它 的 。 



















O 
浏览 器 所 、 
uu | 
Pal aoc 本 三 
处 理 程 序 ， 即 网 页 
加 载 完毕 后 将 执行 晤 
的 代码 。 
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和: 
下 
其 


但 


从 


如 何 创建 第 一 个 事件 处 理 程序 


要 理解 事件 ， 最 佳 方式 是 编写 一 个 处 理 程 序 ， 并 将 其 关联 到 一 个 事件 。 别 饼 了 ， 
你 见 过 多 个 事件 处 理 示例 ， 其 中 包括 网 页 加 载 事 件 ， 但 我 们 还 未 全 面 地 阐述 事件 
处 理 的 工作 原理 。 网 页 加 载 事 件 的 触发 时 间 点 是 : 放 览 絮 加 载 完 网 页 、 显 示 网 页 
的 所 有 内 容 并 生成 了 表示 网 页 的 DOM。 


下 面 来 详细 介绍 如 何 编写 这 种 处 理 程序 并 确保 在 网 页 加 载 事 件 发 生 时 调用 它 。 

















首先 ， 需 要 编写 一 个 处 理 网 页 加 载 事 件 的 号 数 。 在 这 里 ， 这 个 号 数 将 在 网 页 加 
载 完 毕 时 显示 “walivel” 。 


处 理 程 序 其 实 束 是 一 个 函数 。 


YN 


function pageLoadedHandler() { 六 目 信人 2h 一 米 i 
Pag 这 十 我 们 的 函数 。 我 们 将 其 命名 为 


alert("I'm alive!"); pageLoadedHandler， 但 你 可 以 根据 
| 自己 的 喜好 随意 命名 ， 
别 忘 了 ， 我 们 通常 称 之 要 
为 处 理 程序 或 回调 函数 。 这 个 事件 处 理 程序 的 功能 


= 
限 ， 它 只 是 显示 一 个 提示 框 。 


处 理 程序 编写 好 后 ， 需 要 建立 关联 ， 让 浏览 器 知道 有 和 这么 一 合葬 数 ， 应 在 加 
载 事 件 发 生 时 调用 它 。 为 此 ,我 们 这 样 使 用 window 对 和 象 的 属性 onload: 


为 将 这 个 处 理 程序 关联 到 加 载 事件 ， 我 
~ [rm ) 
window.onload = pageLoadedHandler; ” 们 将 window 对 象 的 属 性 onload 设 置 为 它 。 


个 


这 样 ， 网 页 加 载 事件 发 生 时 ， 将 。 N\ 你 将 看 到 ， 指 定 处 理 程序 的 
调用 函数 pageLoadedHandler。 方式 随 事件 的 类 型 而 异 。 


就 这 些 ! 编写 这 些 代 码 后 ,我 们 就 知道 网 页 加 和 载 完 毕 后 ,浏览 器 将 调用 赋 
给 属性 window.onload 的 咏 数 ， 














i 
当 
本 
片 
TIFT 
wT 
语 
几 
、.4 
Cn 
Co 
On 


测试 事件 处 理 程 序 


浏 斌 事件 处 理 程 邦 


请 新 建 一 个 文件 ， 将 其 命名 为 event.html， 并 添加 对 加 载 事 件 处 理 程 序 进行 测试 的 代 
码 。 在 浏览 器 中 加 载 这 个 网 页 ， 并 确定 你 看 到 了 提示 框 。 








浏览 器 首先 加 载 你 的 网 页 ， 开 始 


到 分 析 其 中 的 HTML 并 创建 DOM。 
<Idoctype html> 


<html lang="en"> 


<head> 
<meta charset="utf-8"> 遍 到 脚本 后 ， 浏 览 器 
2 一 A 
<title> I'm alive! </title> 开始 执行 其 中 的 代码 。 
<script> 
window.onload = pageLoadedHandler; 当前 ， 脚 本 只 定义 了 一 个 函数 并 
function pageLoadedHandler() { 将 其 赋 给 属性 window.onload。 别 
alert("I'm alive!"); 下 了 ， 这 个 函数 将 在 网 页 加 载 完 
} os 后 被 调 用 O 
</script> 
接 下 来 ， 浏 览 器 继续 分 
</head> p> | 区 器 继续 分 析 HTML。 
<body> | 
il 屿 器 调用 网 页 加 载 处 理 程 
</html> 序 。 


\ 


在 这 里 ， 这 个 处 理 程序 创 
建 一 个 提示 框 ， 在 其 中 显 


— sl 66 
不 消息 “Pm alivel” 


The page at localhost Says: 
Nm alivel 





O 


ge 


在 不 编写 函数 的 









青 况 下， 能 舍 指 定 事 件 处 理 程序 ? 








和: 
下 
其 


但 


从 


但 凡 你 想 成 为 真正 的 JavaScript 
开发 人 人员， 就 必须 学 习 如 何 处 理 
事件 。 





前 面 说 过 ， 到 目前 为 止 ， 你 编写 代码 的 方式 都 是 线性 的 〈linear) : 你 根据 要 
解决 的 问题， 如 找 出 妈 佳 的 泡 泡 配 方 或 生成 歌曲 99 Bottles of Beer 的 歌词 ， 按 
从 上 到 下 的 顺序 逐步 编写 代码 。 


还 记得 战舰 游戏 吗 ? 其 代码 的 执行 方式 不 完全 征 线性 的 : 你 确实 编写 了 一 些 
设置 游戏 、 初 始 化 模型 等 的 代码 ， 但 这 个 游戏 的 主要 部 分 并 非 定 以 线性 方式 
执行 的 。 每 次 要 射击 战舰 时 ， 玩 家 都 在 表单 的 输入 元 素 中 输入 猜测 ， 再 单 击 
Fire! 按 钮 。 这 将 引发 一 系列 操作 ， 叶 致 游戏 接着 往 下 进行 。 换 句 话 说 ， 你 编 
写 的 代码 对 用 户 输入 作出 响应 。 


以 响应 事件 的 方式 组 织 代码 是 男 一 种 代码 编写 方式 。 要 以 这 种 方式 编写 代码 ， 
需要 芳 虑 可 能 发 生 的 事件 以 及 代码 应 如 何 啊 应 这 些 事件 。 在 计算 机 科学 中 ， 
通常 说 这 种 代码 是 异步 (asynchronous) 的 ， 因 为 我 们 编写 的 代码 仅 在 相应 的 
事件 发 生 时 才 会 被 调用 。 这 种 编码 方式 也 改变 了 我 们 看 待 问题 的 角度 ， 不 再 
逐步 地 编写 代码 来 实现 算法 ， 而 是 将 处 理 各 种 事件 的 众多 处 理 程 序 整合 起 来 ， 
构成 一 个 应 用 程序 。 








ea 
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用 事件 规划 游戏 


近 过 创建 一 个 游戏 来 理 角 事件 


理解 事件 的 最 佳 方 式 古 实践 ， 下 面 遂 过 编写 一 个 人 简单 的 游戏 来 获取 更 多 的 实践 经 


人 > 
Yo 芝 








个 游戏 是 这 样 困 :你 加 载 一 个 网 页 ， 它 显示 一 幅 图 像 。 这 幅 图 像 不 古 普通 


的 图 像 ， 而 是 一 幅 非 第 模糊 的 图 像 。 你 的 任务 古 猿 出 图 像 古 什么 。 要 核实 你 是 否 
青 对 了， 可 单 击 图 像 ， 让 它 不 再 模糊 不 清 。 























过 程 如 下 所 示 。 
一 一 一 ww I ce 

目 日 日 门 Image Guess 人 本 rg pd - pe Guess di wr 
一 HE 9/image.html | ”| 一 合 癌 localhost/~Beth JHFIS /oe pp 

个 口 localhost/ Beth/HFJS/chapter . _ eth/ 小 /chapter9/image.html | > 三 
和 这 是 图 像 的 模糊 版 本 ， 

它 到 底 是 什么 呢 ? 
和 一 





你 一 边 哼 着 益 智 问 
答 节 目 《 危 险 边 缘 》 
的 主题 曲 ， 一 边 芋 


试 盘算 着 这 是 什么 
图 像 。 


本 
为 自己 猜 到 后 ， 你 单 
0 , 让 请 晰 版 本 时 





下 面 先 来 编写 HTML 标 记 。 我 们 将 使 用 两 幅 JPG 图 像 ， 其 中 一 幅 是 模糊 的 ， 另 一 幅 是 清晰 
的 。 我 们 将 它们 分 别 命名 为 zeroblur.jpg 和 zero.jpg。HTML 标 记 如 下 : 
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这 些 HTML 代 码 非 常 简单 ， 其 中 有 一 个 准备 就 
<Idoctype html> 


0 绪 的 <script> 元 素 ， 在 其 中 次 加 JavaScript 企 
en 一 一 码 。 出 于 简化 考虑 ， 我 们 不 打算 使 用 独立 的 
So JavaScript 文 件 ， 而 是 直接 在 这 里 添加 脚本 。 

<meta charset="utf-8"> 尔 将 看 到 ， 实 现 这 个 游戏 需要 的 代码 很 少 。 


<title> Image Guess </title> 
<style> body { margin: 20px; } </style> 
<script> </script> 

</head> 


ne 这 是 网 页 默认 显示 的 模 灿 

” ”一 @ 像 。 我 们 把 它 的 4 指定 
<img id="zero" src="zZeroblur.jpg"> 为 zero 稍 后 你 将 看 到 中 
9 7 车 


</body> 何 1 文 人 ， 
</html> 史 用 这 个 id。 


© sis 
kn SE 七 pam A 
Y Et . 
| 天 Wb 以 | /oc “ 
时 = host/~Beth/HF 


一 
ca 


一 


在 浏览 器 中 加 载 这 些 标记 ， 你 将 看 到 模糊 的 图 像 。 为 实现 这 个 游 
戏 ， 需 要 在 用 户 单 击 这 幅 图 像 时 作出 响应 ， 将 图 像 的 清晰 版 本 显 一 > 
示 出 来 。 


好 在 每 当 网 页 中 的 HTML 元 素 被 单 击 〈 在 移动 设备 上 十 触摸 ) 时 ， 
都 将 触发 一 个 事件 。 你 只 需 为 这 个 事件 创建 一 个 处 理 程 序 ， 并 在 
其 中 编写 显示 图 像 清 晰 版 本 的 代码 ， 如 下 所 示 。 








访问 DOM 中 的 这 个 图 像 对 象 ， 并 将 其 属性 onclick 设 置 为 
一 个 处 理 程序 。 


@@ 在 这 个 处 理 程序 中 编写 代码 ， 将 图 像 的 src 属 性 从 模糊 图 像 
改 为 清晰 图 像 。 





下 面 就 来 按 步 又 编写 代码 。 


第 1 步 : 沪 问 V0M 中 的 图 像 


访问 图 像 对 你 来 说 已 经 不 新 鲜 了 ， 只 需 使 用 老 朋 友 方 法 
getElementByIgd 束 能 获得 指 癌 它 的 5| 用 。 





此 一 获取 指向 图 像 元 素 的 引用 ， 并 将 


Var image = document.getElementById("zero"); 其 赋 给 变量 image。 


哦 ， 还 需 确 保 这 些 代 码 在 网 页 的 DOM 创 建 好 之 后 再 运行 ， 为 此 ， < 一 、 别 站 只 在 网 页 加 载 完毕 后 ， 我 

小 人 下、 mw、 、 » -7 3 Um 9 4/、\ 人 7TTI0，, 
可 使 用 windaow 对 象 的 属性 on1load。 我 们 将 这 些 代 码 放 在 图 数 们 才能 从 DOM 中 获取 这 幅 图 像 。 
init 中 ， 并 将 属性 onloagd 设 置 为 这 个 函数 。 


我 们 创建 函数 init， 并 将 其 赋 给 属性 
上 onload， 从 而 确保 这 些 代 码 在 网 页 加 
window.onload = init; 载 完 毕 后 才 执 行 。 
function init() { 


Var Image = document.getElementById("zero"); 
} SN gl 亡 定 y 台数 
别 起 了， 在 JavaScript 中 ， 定 义 函 数 


的 顺序 无 关 紧 要 。 因 此 可 先 将 in 直 赋 


函数 init 中 ， 我 们 获取 一 个 引 ! 
它 指向 记 为 Zero 的 图 像 元 素 。 给 属性 onload， 再 定义 它 。 


你 现在 的 位 置 ， 389 


添加 事件 处 理 程 序 


第 4 步 : 添加 更 新 闻 像 的 处 理 程序 


要 添加 一 个 响应 图 像 单 击 事件 的 处 理 程序 ， 只 需 将 一 个 函数 赋 给 图 像 
的 属性 onclick。 下 面 将 这 个 函数 命名 为 showAnswer 并 定义 它 。 


window.onload = init; 
function init() { 


Var Image = document.getElementById("zero"); 


image.onclick = showAnswer; < 将 一 个 处 理 程序 赋 给 从 DOM 中 获 
i 取 的 图 像 对 象 的 onclick 属 性 。 


接 下 来 需要 编写 国 数 showAnswer， 它 将 图 像 元 素 的 sczr 属 性 改 为 清晰 
的 图 像 ， 让 图 像 变 清晰 : 


首先 ， 必 须 再 次 从 DOM 
获取 该 图 像 元 素 。 
function showAnswer() { 
Var Image = document.getElementById("zero"); 别 筷 了 ， 模 糊 版 名 为 zeroblurjpdg ) 








\ 主 b> 0 
image.src = "zero.jpg"; on pe 
) SS 
获得 图 像 元 素 后 ， 就 可 
修改 它 了 一 一 将 其 src 属 
性 设置 为 清晰 的 图 像 ， 
mS, 本 Ge x 网 
€ Gd 门 localhost/~Beth /HFJS/chapter9/image ht »| 三 
2 为 只 
rs: 





来 测试 一 下 这 个 简单 的 游戏 。 将 所 有 的 HTML、CSS 和 
JavaScript 都 输入 一 个 文件 中 ， 并 命名 为 image.htm1。 再 从 
http://wickedlysmart.com/hfjs 下 载 所 需 的 图 像 ， 并 将 它们 存 
储 到 image.html 所 在 的 文件 夹 。 然 后， 在 放 览 絮 中 加 载 这 个 
HTML 文 件 。 





单 击 图 像 的 任何 地 方 都 将 导致 处 
理 程 序 showAnswer 被 调用 ， 已 修 A 
改 这 个 图 像 元 素 的 src， 揭晓 答案 。 
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人 
| 各 ) ， 设置 图 像 的 属性 src 与 使 用 
setAttribute 设 置 特性 src 相 同 吗 ? 


A 

只 ， 就 这 里 而 言 ， 效 果 是 相同 的 。 
使 用 getElementById 从 DOM 获 取 
HTML 元 素 时 ， 获 得 的 是 包含 多 个 方 
法 和 属性 的 元 素 对 象 。 所 有 的 元 素 对 象 
都 包含 属性 id， 其 值 为 相应 HTML 元 
素 的 id (如 果 在 HTML 中 设置 了 ) 。 表 
示 图 像 的 元 素 对 象 还 有 一 个 src 属 性 ， 
其 值 为 相应 <img> 元 素 的 scr 特 性 指定 
的 图 像 文 件 。 


等 等 ,为 何 需要 在 showRnswezr 中 再 次 调 
且 getElementById 呢 ? 我 不 确定 这 里 的 
执行 流程 是 什么 样 的 。 









啊 哈 ， 代 码 包含 大 量 事 件 处 理 程序 时 ， 有 时 很 难 搞 
清楚 其 执行 流程 。 别 忘 了 ， 函 数 init 在 网 页 加 载 完 
毕 后 被 调用 ,但 函数 snowAnswer 要 等 到 用 户 单 击 
图 像 时 才 被 调用 。 因 此 ， 这 两 个 事件 处 理 程序 被 调 
用 的 时 间 不 同 。 


另外 ， 别 忘 了 作用 域 规则 。 在 国 数 init 中 ， 我 们 
将 getEalementById 返 回 的 对 象 存储 在 局 部 变量 
image 中 。 这 意味 着 国 数 结 束 时 ， 这 个 变量 不 在 作 
用 域内 ， 进 而 被 销毁 。 因 此 ， 等 国 数 showAnswet 
被 调用 时 ， 我 们 必须 再 次 从 DOM 获 取 这 个 图 像 对 象 。 





各 


牛 


车 


从 


但 





诚然 ， 我 们 可 以 将 这 个 对 象 存储 在 一 个 全 局 变量 
但 滥用 全 局 变量 可 能 导致 代码 难以 理解 ， 还 容易 出 





现 bug。 这 正 是 我 们 要 避免 的 。 


世上 没有 
晶莹 的 问题 


然而 ， 并 非 所 有 HTMEL 特 性 都 有 对 
应 的 对 象 属性 ， 因 此 对 于 这 些 特 
性 ， 必 须 使 用 setRAttribute 和 
getRAttribute 来 设置 和 获取 。 就 
src 和 id 而 言 ， 要 设置 和 获取 ， 可 使 
用 元 素 对 象 的 相应 属性 ， 也 可 使 用 
getAttribute 和 setAttribute, 
而 且 这 两 种 方法 的 效果 相同 。 


>》 
只 。 前 面 在 一 个 处 理 程序 中 调用 了 
另 一 个 处 理 程序 ? 


A 六 

只 其 实 并 非 如 此 。 网 页 加 载 完毕 
后 ， 将 调用 加 载 事件 处 理 程序 。 在 这 
个 处 理 程序 中 ， 我 们 将 一 个 处 理 程序 
赋 给 了 图 像 的 属性 onc1ick， 但 要 等 
到 用 户 单 击 图 像 时 才 会 调用 它 。 用 户 
单 击 图 像 时 (这 可 能 是 在 网 页 加 载 完 
毕 的 很 久之 后 ) ， 才 会 调用 单 击 事件 
处 理 程 序 showAnswer。 因 此 ， 这 两 
个 处 理 程序 是 在 不 同 的 时 间 调 用 的 ，。 
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天 于 执行 流 的 练习 


， 莹 身 浏览 器 
下 面 是 猜 轩 游戏 的 代码 ， 你 的 任务 是 变 身 浏览 器 ， 搞 清楚 每 企 事 件 


发 生 后 该 如 何 做 。 完 成 这 个 缘 勾 后， 清查 看 本 章 未 尾 的 答案 ， 看 看 
你 是 否 都 明白 了 。 我 们 已 为 你 完成 了 第 一 部 分 。 






window.onload = init; 

function init() { 
Var image = document.getElementById("zero"); 
image.onclick = showAnswer; 


} 


function showAnswer() { 
var image = document.getElementById("zero"); 
image.src = "Zero.]P9": 


网 页 加 载 时 …… 函数 in 示 和 showAnswer 


网 页 加 载 事 件 发 生 
时 


图 像 单 击 事件 发 生 
时 SE 





全 文 里 列 出 你 的 答案 。 


ye" 


异步 编码 


如 果 网 页 包含 多 幅 图 像 ， 要 求 单 击 每 幅 图 像 时 都 显示 清晰 版 ， 该 如 何 用 代码 来 处 理 这 种 情 
形 呢 ? 实现 这 种 目标 的 傻 办 法 是 什么 ? 能 否 对 既 有 代码 进行 少量 修改 来 实现 这 个 目标 呢 ? 


Judy: 大 家 好 ! 到 
目前 为 止 ， 猜 图 游 
戏 运行 得 很 好 ， 但 
我 们 应 对 其 进行 扩 
展 ， 在 网 页 中 包含 
更 多 图 像 。 


;im hit, Rt 
Jim Sn (Cee 是 这 样 想 的 。 


Joe: 我 准备 了 很 多 图 像 ， 束 差 编写 代码 了 。 闻 
面 将 两 幅 图 像 命 名 为 zero.jpg 和 zeroblurjpg。 我 
给 新 增 的 图 像 命名 时 遵循 了 这 种 约定 ， 将 它们 
命名 成 了 one.jpg 和 oneblur.jpg 等 。 


Jim: 需要 给 每 幅 图 像 都 编写 一 个 新 的 单 击 事件 
处 理 程序 吗 ? 如 有 果 这 样 做 ， 将 有 大 量 重 复 的 代 
码 。 毕 竟 ， 每 个 事件 处 理 程序 所 做 的 事情 都 完 
全 相同 : 将 模糊 版 替换 为 清晰 版 ， 不 是 吗 ? 


Joe: 确实 如 此 ， 但 我 不 知道 如 何 将 同一 个 事件 
处 理 程序 用 于 多 幅 图 像 。 这 可 能 吗 ? 

Judy: 我 们 可 将 同一 个 处 理 程序 (就 是 同一 个 
函数 ) 赋 给 游戏 中 每 幅 图 像 的 属性 onclick。 





















Joe: 这 样 做 的 话 ， 用 户 单 击 任何 图 像 时 ， 都 将 
调用 同一 个 函数 ? 


Judy: 没 错 。 我 们 将 把 snowAnswer 用 作 每 幅 
图 像 的 单 击 事件 处 理 程序 。 


Jim: 但 我 们 如 何 知道 要 让 哪 幅 图 像 变 清晰 呢 ? 


Joe: 你 的 意思 征 说 单 击 事件 处 理 程序 不 知道 这 
一 氮 ? 








Jim: 它 怎 么 知道 ? 当前， 函数 showAnswer 假 
定 用 户 单 击 的 是 id 为 zezo 的 图 像 。 如 果 对 于 每 
幅 图 像 的 单 击 事件 都 调用 showAnswer， 吏 必 
须 让 其 代码 适用 于 任何 图 像 。 


Joe: 哦 ， 没 错 。 那 么 我 们 如 何 确定 用 户 单 击 的 
是 哪 幅 图 像 呢 ? 


Judy: 实际 上 ， 我 一 直 在 仔细 研究 事件 ， 我 想 
单 击 事件 处 理 程序 有 办 法 确定 用 户 单 击 的 古 哪 
个 元 素 。 现 在 暂时 不 管 这 一 后， 先 在 游戏 中 添 
加 一 些 图 像 ， 看 看 如 何 为 它们 指定 相同 的 事件 
处 理 程序 ， 再 考虑 如 何 确定 用 户 单 击 的 是 哪 幅 
图 像 。 


Joe 和 Jim: 有 道理 | 
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为 游戏 增加 图 像 


再 添加 一 些 周 像 

我 们 有 一 系列 新 图 像 ， 先 来 将 它们 添加 到 网 页 中 。 我 们 再 添加 5 
幅 图 像 ， 这 样 网 页 将 总 共 包 含 6 幅 图 像 。 我 们 还 将 修改 CSS， 让 图 
像 之 间 有 一 定 的 间距 。 


获取 图 像 
















从 http://wickedlysmart. 
com/hfjs 下 载 压缩 文件 ， 
可 在 文件 夹 chapter9 中 找 
到 所 有 这 些 图 像 。 






<Iidoctype html> 
<html lang="en"> 
<head> 

<meta charset="utf-8"> 

<title> Image Guess </title> 

人 使 用 这 个 C55 属 性 将 图 像 的 
body { margin: 20px; } 外 边 距 指定 为 20 像 素 ， 

} 


Img { margin: 20px; 






</style> 
<script> 
window.onload = init; 
function init() { 
var image = document.getElementById("zero"); 
image.onclick = showAnswer; 
} 
function showAnswer() { 


Var Image = document.getElementById("zero"); 


image.src = "zero.Jjpg'’ 
} 如 果 你 对 这 个 网 页 进行 测 
</script> 试 ， 结果 将 类 似 于 这 样 。 
</head> 
<body> 


<img id="zero" src="zZeroblur.jpg"> 
<img id="one" src="oneblur.jpg"> 
<img id="two" src="twoblur.Jjpg"> 
<img id="three" src="threeblur.jpg"> 
<img id="four" src="fourblur.jpg"> 
<img id="five" src="fiveblur.jpg"> 
</body> 
</html> 
在 这 里 又 庄 加 了 5 幅 图 像 。 注 意 到 对 于 每 
幅 图 像 ， 都 使 用 了 相同 的 id、src 和 文件 
命名 方案 。 稍 后 你 将 看 到 这 样 做 的 好 处 。 





可 
下 
其 


但 


从 


将 同一 个 事件 处 理 程序 赋 给 每 幅 固 像 的 
属性 onclick 


在 网 页 中 包含 更 多 图 像 后 ， 需 要 做 的 工作 也 更 多 。 当 前 ， 你 可 单 击 第 一 幅 图 像 ( 即 《 蒙 娜 丽 
莎 》) 以 显示 其 清晰 版 ， 但 其 他 图 像 呢 ? 


我 们 可 以 为 每 幅 图 像 编 写 一 个 处 理 程 序 ， 但 从 前 面 的 讨论 可 知 ， 这 样 做 既 麻 烦 又 浪费 ， 如 下 
所 示 : 


window.onload = init; 
function init() { 


Var Image0 = document.getElementById("zero"); 


4 可 以 获取 网 页 中 的 每 幅 图 像 ， 并 给 


image0.onclick = showImageZero; 它们 指定 不 同 的 单 击 处 理 程序 。 如 

var Imagel = document.getElementById("one"); 有 果 这 样 做 ， 将 需要 重复 6 次 ， 但 这 
De 二 < KR 、 

imagel.onclick = showImageOne:; 人 多 业 不 了 其 中 的 两 次 。 


i 二 一 其 他 四 次 。 


function showImageZero() { 


var image = document.getElementById("zero"); 


、 已 依 个 
limage.src = "zero.Jpg"; 《一 我 们 还 需要 编写 6 
单 击 处 理 程序 ， 母 
} ee 
function showImageOne() { 幅 图 像 9 


var Image = document.getElementById("one"); 


image.src = "one.jpg"’ 


< 一 一 需要 的 其 他 四 个 处 理 程序 。 


为 每 幅 图 像 编 写 不 同 的 处 理 程序 存在 哪些 缺点 ?请 勾 选 所 有 


符合 的 选项 。 
每 个 处 理 程序 都 包含 大 量 重复 门 。 如 果 需 要 修改 代码 ， 可 能 需要 修改 
的 代码 。 所 有 的 处 理 程序 。 
需要 的 代码 很 多 。 门 。 难以 跟踪 所 有 的 图 像 和 处 理 程序 。 
门 难以 以 通用 的 方式 处 理 任意 数 站 代码 更 难 维护 。 


量 的 图 像 。 
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对 多 个 事件 使 用 同一 个 事件 处 理 程序 


如 何 将 同一 个 处 理 程序 周 于 所 有 周 像 


显然 ， 为 每 幅 图 像 编 写 不 同 的 处 理 程序 不 是 解决 这 个 上 问题 的 好 办 法 。 那 么 如 何 将 
既 有 处 理 程序 showRAnswez 用 于 处 理 所 有 图 像 的 单 击 事件 呢 ? 为 此 ， 显 然 需 要 对 
showAnswezr 稍 作 修 改 。 要 将 showaAnswez 用 于 所 有 图 像 ， 需 要 做 如 下 两 项 工作 。 





1 将 函数 showAnswer 指 定 为 网 页 中 每 幅 图 像 的 单 击 事件 处 
理 程序 。 


2 修改 函数 showAnswer， 使 其 能 够 显示 任何 图 像 的 清晰 版 ， 
而 不 仅仅 是 zero.jpg。 


我 们 将 以 通用 的 方式 完成 这 两 项 任务 ， 使 得 在 网 页 中 再 语 加 其 他 图 像 时 ， 国 数 
showAnswer 依 然 适 用 。 换 句 话 说 ， 如 果 代 码 编 写 正确 ， 在 网 页 中 添加 或 删除 图 像 后 ， 也 
无 需 对 代码 作 任 何 修改 。 下 面 就 来 这 样 做 。 


将 这 个 单 击 处 理 程序 赋 给 网 页 中 的 每 幅 同 像 
我 们 要 克服 的 第 一 个 障碍 如 下 : 在 当前 的 代码 中 ， 我 们 使 用 方法 getElementById 
来 获取 指 问 图 像 Zzero 的 引用 ， 并 将 函数 snowAnswer 峰 给 它 的 属性 onclick。 我 
们 将 采用 一 种 更 简单 的 方式 ， 而 不 是 使 用 getElementById 来 分 别 歼 取 指 问 每 
帐 图 像 的 引用 : 一 次 性 歼 取 所 有 图 像 ， 再 通过 迭代 来 设置 每 幅 图 像 的 单 击 事件 
处 理 程序 。 为 此 ， 我 们 将 使 用 一 个 以 前 没有 介绍 过 的 DOM 方 法 : document . 
getElementsByTagName。 这 个 方法 将 一 个 标签 名 (如 img、 p 或 div) 作为 参数 ， 并 
返回 一 个 列表 ， 其 中 包含 所 有 匹配 的 元 素 。 下 面 束 来 使 用 它 : 
function init() { 喇 陈 获取 图 像 zero 并 设置 其 
C 一 单 击 事件 处 理 程序 的 代码 。 


r 

















Si 使 用 标签 名 img 来 获取 网 页 中 的 
var Images = document.getElementsByTagName("img"); TE 素 。 这 将 查找 并 返回 网 页 中 
的 所 有 图 像 。 我 们 将 返回 的 图 


for (var i = 0; i < images.length; I++) { 像 存储 在 变量 ; 中 
家 又 量 images 中 。 


images[i].onclick = showAnswer; 
} 3 
}; 


处 后 ， 渤 代 images， 信 次 将 每 幅 图 信 
的 单 击 处 理 程 序 说 置 为 showAnswer。 
这 样 就 将 每 幅 图 像 的 属性 onclick 都 议 
四 成 了 处 理 程序 showAnswer。 


聚焦 document .getElementsByTagName 


方法 document.getElementsByTagName 的 工作 原理 与 document.getElementById 很 


像 ， 但 不 是 根据 id 来 获取 元 素 ， 而 是 根据 标签 名 (这 里 是 img) 来 获取 元 素 。 当 然 ， 


HTML 中 


可 能 包含 很 多 <img> 元 素 ， 所 以 这 个 方法 可 能 返回 很 多 或 一 个 元 素 ， 也 可 能 不 返回 任何 元 素 ， 
具体 返回 多 少 元 素 取决 于 网 页 包含 多 少 幅 图 像 。 在 这 个 猜 图 游戏 中 ， 网 页 包含 6 个 <img> 元 
素 ， 因 此 返回 的 列表 中 将 包含 6 个 图 像 对 象 。 


我 们 获取 的 是 一 个 element 对 象 列 表 ， 其 


中 的 对 象 都 与 指定 标签 名 匹配 。 


ON 


var Images = document.getElementsByTagName("img"); 


返回 的 是 类 似 于 数组 的 对 
象 列 表 。 它 类 似 于 数组 ， 
但 与 数组 又 不 完全 相同 。 


y 

[9); 你 说 过 ，getElementsByTag- 
Name 返 回 一 个 列表 。 这 指 的 是 数组 
吗 ? 

A 

个， 实际 上 返回 的 是 一 个 NodeList 
对 象 ， 但 你 可 像 处 理 数组 一 样 处 
理 和 名。NeoageDis 七 是 一 个 NG6dE 集 
合 ， 而 Node 指 的 其 实 就 是 DOM 树 中 的 
element 对 象 。 你 可 以 像 数 组 一 样 选 
代 这 种 集合 : 使 用 length 属 性 来 获 
取 其 长 度 ， 再 通过 用 万 括号 括 起 的 索 
引 来 访问 NodeList 的 每 个 项 目 。 然 
而 ， 数 组 和 NodeList 的 相似 之 处 仅 此 
而 已 ， 因 此 处 理 NodeList 对 象 时 ,必须 
除非 需要 在 DOM 中 添加 或 删除 
元 素 ， 否 则 不 必 对 NodqeList 有 更 深入 
的 了 解 。 


Wi 
省 >。 


注意 到 这 里 有 个 s， 这 意味 
着 可 能 获取 很 多 元 素 。 


世上 滩 有 
晶 知 的 问题 


[9) ， 可 以 给 任何 元 素 指定 单 击 处 理 
程序 吗 ? 


AAA ， 
只 ” 。 差 不 多 是 这 样 的 。 对 于 网 页 中 
的 任何 元 素 ， 只 需 获 取 它 ， 再 将 其 


onclicKk 属 性 设置 为 一 个 函数 即 可 。 


正如 你 看 到 的 ， 处 理 程序 可 能 是 某 个 


元 素 专 用 的 ， 也 可 将 其 用 于 很 多 元 素 。 


当然 ， 不 会 在 网 页 中 显示 出 来 的 元 素 
(如 <script> 和 <head>) 不 支持 单 击 
等 事件 。 


(用 引号 将 标签 名 括 
起 ， 但 不 包含 < 和 >|! 


[9) 会 给 处 理 程序 传递 参数 吗 ? 


AAA ，。 
只 ”这 个 问题 问 得 好 ， 也 问 得 正 是 
时 候 。 会 给 处 理 程序 传递 参数 ， 我 们 


马上 将 讨论 传递 给 一 些 处 理 程序 的 事件 
对 象 。 


人 
人 ] : 除 单 击 事件 外 ， 元 素 还 支持 其 
他 事件 吗 ? 


AAA ， 

只 ”还 有 很 多 其 他 的 事件 。 实 际 上 ， 
你 在 战舰 游戏 中 见 过 其 中 的 一 个 : 按 
键 事件 。 在 这 个 游戏 中 ， 每 当 用 户 在 
表单 的 输入 元 素 中 按 回 车 键 时 ， 都 将 
调用 一 个 事件 处 理 程序 。 本 章 后 面 将 
介绍 其 他 几 种 事件 。 


rp 


你 现在 的 位 置 ， 


天 于 event 对 和 象 的 谈话 
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Judy， 我 们 现在 有 一 个 事件 处 理 程序 
showAnswer， 人 它 处 理 所 有 冉 像 的 单 击 事件 。 你 是 
不 是 说 过 ，showAnswer 被 调用 时， 你 知道 如 何 判 
断 用 户 单 击 的 是 嘱 幅 因 像 吗 ? 


Judy: 我 说 过 。 每 次 调用 单 击 事件 处 理 程序 时 ， 都 将 向 它 
传递 一 个 事件 对 象 ， 你 可 使 用 这 个 对 象 来 获取 有 关 事 件 的 
细 攻 。 
Joe: 比如 用 户 单 击 的 是 哪 幅 图 像 ? 
Judy: 更 准确 地 说 是 触发 事件 的 元 素 ， 这 被 称 为 目标 (target) 
Joe: 什么 是 目标 呢 ? 
Judy: 我 说 过 ， 它 是 触发 事件 的 元 素 。 例 如 ， 用 户 单 击 特定 的 图 
像 时 ， 目 标 就 是 这 幅 图 像 。 
Joe: 因此 ， 如 果 用 户 单 击 id 为 zero 的 图 像 ， 目 标 将 被 设置 为 这 幅 图 像 ? 
Judy: 更 准确 地 说 ， 是 表示 这 幅 图 像 的 元 素 对 象 。 
Joe: 又 统 回 米 了 ? 
Judy: 可 将 这 个 元 素 对 象 视 为 使 用 值 zero 调 用 document.getElementById 得 到 的 东西 。 它 
表示 DOM 中 id 为 zero 的 图 像 。 
Joe: 明白 ， 那么 如 何 获 取 这 个 目标 呢 ?” 好 像 有 了 它 束 能 确定 用 户 单 击 的 是 哪 幅 图 像 。 
Judy: target 束 是 事件 对 象 的 一 个 属性 。 
Joe: 太 好 了 ， 这 正 是 showAnswer 梦 只 以 求 的 ， 马 上 就 能 达成 目标 了 。 等 等 ， 向 showAnswer 
传递 了 一 个 事件 对 象 ? 
Judy: 设 请 。 
Joe: 当前 ， 畏 数 showAnswez 的 代码 是 什么 样 的 呢 ? 虽然 给 它 传递 了 一 个 事件 对 象 ， 可 它 没 有 
接受 这 个 对 象 的 形 参 | 
Judy: 别 忘 了 ，JavaScript 人 允许 你 省 略 形 参 。 
Joe: 哦 ， 是 这 样 的 。 
Judy: Joe， 你 别 忘 了 ， 现 在 需要 搞 清楚 的 是 ， 如 何 将 图 像 的 src 设 置 为 清晰 版 图 像 。 当 前 ,我 
们 假定 请 晰 版 图 像 名 为 zero.jpg， 但 这 种 假设 不 再 成 立 。 
Joe: 也 许可 以 使 用 图 像 的 1q 特 性 来 确定 清晰 版 图 像 的 名 称 ， 因 为 所 有 图 像 元 素 的 1q 都 是 其 清 
晰 版 图 像 的 名 称 。 
Judy: 昕 起 来 好 像 行 得 通 | 



































第 9 章 


异步 编码 


事件 对 象 的 工作 原理 


和 还 有 其 他 的 事件 ， 
nn Bs ed 

半 对 和 模 型 DOM) 事件 有 生 时 ， 者 全 相应 的 外 理 上传 ”个 于 

和 

eatin http gt 

ohare att 


下 面 来 说 明 事件 对 象 的 工作 原理 。 
就 拿 这 里 的 游戏 来 说 吧 。 一 ~ 


用 户 单 击 图 像 时 …… 人 







将 触发 单 击 事件 …… v 


这 将 导致 一 个 event 对 


然后 ， 该 对 象 被 传递 
给 事件 处 理 程序 。 


function showAnswer (eventOpb]) ({ 


和 
| 


关 事 件 的 信息 ， 如 事件 类 型 、 触 发 事件 的 元 素 等 ，。 


常规 信息 和 具体 信息 。 具 
4 二 有 关 事 件 的 常规 信息 和 具 

和 ， 事 件 对 象 都 包含 哪些 信息 呢 ? ve 
TO 
、 et 指向 触发 事件 的 元 素 。 因 此 ， 如 采用 户 单 击 网 页 中 
已 他 ? 


和 








如 果 你 运行 的 是 IE8 | 


 ， 或 更 低 版 本 的 浏览 器 ，: 
文 样 来 访问 它 ， \ 请 参阅 附 o : 
OO 网 几 有 
II 在 IE 旧版 本 中 ， 需 要 以 稍 做 不 同 
target 指 出 了 角 的 方式 获取 事件 对 旬 
function showAnswer(eventObj) { 入” 发 事件 的 是 哪 
UNnNCTL 


var image = eventObj.target; 元 素 。 


0 


你 现在 的 位 置 ， 399 


事件 对 和 象 的 练习 


RS 
半 经 和 巡 升 站 





前 面 说 过 ， 表 示 DOM 事 件 的 事件 对 象 包含 一 些 属性 ， 它 们 提供 了 有 关 事 件 的 额外 
百 恩 。 下 面 是 事件 对 象 可 能 包含 的 其 他 一 些 属性 ， 请 将 每 个 属性 及 其 用 途 连 接 起 


target 


type 


timeStamp 


keyCode 


clientX 


clientY 


touches 
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要 确定 用 户 单 击 的 位 置 离 浏 览 器 窗口 的 上 边缘 
有 多 远 ? 使 用 我 吧 ，。 


我 仓 钳 有 月 发 事件 的 对 家 。 我 可 以 古 各 种 不 同 
的 对 象 ， 但 通 第 是 元 素 对 象 。 








在 触摸 设备 上 ， 可 使 用 我 来 确定 用 户 使 用 了 多 
少 根 手指 来 触摸 屏 项 


我 是 一 个 字符 串 ， 如 "click" 或 "10ad", 指出 了 
发 生 的 是 哪 种 事件 。 


想 知道 事件 古 何 时 发 生 的 ?我 可 向 你 提供 这 种 
信息 的 属性 。 





要 确定 用 户 单 击 的 位 置 离 浏览 器 窗口 的 左边 缘 
有 多 远 ? 使 用 我 吧 ，。 








我 能 告诉 你 用 户 刚 按 下 了 哪个 键 。 


使 用 事件 对 象 


对 事件 有 了 更 深入 的 了 解 (具体 地 说 是 向 单 击 处 理 程序 传递 了 事件 对 象 ) 后 ， 咀 们 
来 看 看 如 何 利用 事件 对 象 中 的 信息 让 网 页 上 相应 的 图 像 变 清晰 。 为 此 ， 我 们 再 来 看 看 
HTML 标 记 : 








<Idoctype html> 这 里 再 次 列 出 了 HTML 标 记 。 


<body> 


<img id="zero" src="zZeroblur.jpg"> 每 个 图 像 元 素 都 有 一 个 id， 它 是 相 
<img id="one" src="oneblur.jpg"> A 应 请 晰 版 图 像 的 名 称 。 因 此 id 为 
<img id="two" src="twoblur.jpg"> zero 的 图 像 元 素 的 请 晰 版 图 像 为 
<img id="three" src="threeblur.jpg"> zero.jpg， 而 id 为 one 的 图 像 元 素 的 


清晰 版 图 像 为 onejpg， 依 此 类 推 。 


<img id="four" src="fourblur.jpg"> 


<img id="five" src="fiveblur.jpg"> 
</body> 
</html> 


广 意 到 每 个 图 像 元 素 的 id 都 对 应 清晰 版 图 像 的 名 称 (不 包括 扩展 名 .jpg) 。 如 果 能 够 获 
取 这 个 id， 则 加 上 扩展 名 .jpg 后 ， 束 能 得 到 相应 请 晰 版 图 像 的 名 称 ， 从 而 将 图 像 元 素 的 
scr 属 性 改 为 清晰 版 图 像 的 名 称 了 ， 如 下 所 示 : 


别 忘 了 ， 每 当 用 户 单 击 图 像 时 ， 都 
将 传 入 一 个 事件 对 象 。 


该 事件 对 象 的 属 性 target 十 一 A 
function showAnswer(eventObj) { 2 名 被 单 击 的 图 像 元 去， 


var image = eventObj.target; 


因此 ， 我 们 可 以 使 用 该 对 象 的 id 
性 来 获取 清晰 版 图 像 的 名 称 


name = name + ".jpg"; 
image.src = name; ”最 后 ,将 图 像 元 素 的 src 
} 属性 设置 为 该 名 称 。 


修改 图 像 元 素 的 src 属 性 后 ， 浏 览 器 将 立即 获取 指 
定 的 新 图 像 ， 并 在 模糊 版 图 像 的 位 置 显示 它 。 


你 现在 的 位 置 ， 


各 


咎 
EE: 


但 


从 


401 


测试 猜 图 游戏 


浏 试 事件 对 象 和 target 展 性 


请 更 新 文件 image.html 的 人 代码， 再 对 其 进行 测试 。 猿 测 图 像 、 单 击 它 并 查看 
显示 的 请 晰 版 。 想 想 这 个 程序 吧 ， 它 并 没有 被 设计 成 从 头 到 尾 运行 的 ， 而 是 
完全 由 一 系列 操作 组 成 ， 这 些 操 作 是 用 户 单 击 图 像 时 触发 的 事件 引起 的 。 另 
外 ， 你 使 用 了 相同 的 代码 来 处 理 所 有 图 像 的 单 击 事件 。 这 些 代 码 很 聪明 ， 知 
道 用 户 单 击 的 是 哪 幅 图 像 。 请 尝试 运行 这 个 游戏 。 如 有 果 你 单 击 两 次 ， 结 果 如 
何 呢 ? 是 否 有 事情 发 生 ? 














OO 0 co he ar x 
Da A localhostj~Beth/HFJS/chapterg /image.html 


现在 ， 单 击 任何 图 像 时 ， 都 
将 看 到 其 请 晰 版 。 真 棒 | 








世上 没有 
晶 敬 的 问题 


人 ] ， 记 会 给 加 载 事件 处 理 程序 传递 一 个 事件 对 象 四 ? 
Ac ， 

只 是 的 。 这 个 事件 对 象 所 含 目标 (window 对 象 )、 
事件 发 生 的 时 间 、 事 件 类 型 ("loadgd") 等 信息 。 在 加 载 
事件 处 理 程 序 中 ， 通 常 很 少 使 用 事件 对 象 ， 因 为 对 这 种 
事件 来 说 ， 它 没有 提供 什么 有 用 的 信息 。 你 将 发 现 ， 事 
件 对 象 在 有 些 情况 下 很 有 用 ， 在 其 他 情况 下 又 毫 无 用 处 。 
这 完全 取决 于 事件 类 型 。 如 果 你 不 确定 事件 对 和 象 包含 哪 
些 有 关 事 件 的 具体 信息 ， 请 参阅 JavaScript 的 参考 手册 。 









人 


如 果 你 要 在 浴 案 揭 明 后 ， 让 图 像 几 秒 钟 
后 又 变 模糊 ， 该 如 何 实现 呢 ? 


省 你 的 
力 









I DS 


Head First: 浏 览 器 ， 
我 们 知道 你 有 多 忙 。 
浏览 器 : 很 荣 池 接受 你 的 采访 。 你 说 的 没 错 ， 有 各 种 
事件 需要 我 去 管理 ， 真 是 忙 得 不 可 开交 。 


Head First: 你 是 如 何 管 理 这 些 事件 的 呢 ? 让 我 们 也 
知道 知道 这 种 奇迹 背后 的 情况 。 

浏览 器 : 你 知道 ， 事 件 几 乎 是 在 不 间断 地 发 生 : 用 户 
移动 鼠标 或 在 移动 设备 上 执行 手势 ， 通 过 网 络 收 到 数 
据 ， 定 时 右 到 期 …… 我 就 像 纽 约 中 心 车 站 ， 需 要 管理 
的 东西 实在 太 多 了 。 


Head First: 我 还 以 为 除了 调用 为 事件 指定 的 处 理 程 
序 外 ， 你 需要 做 的 其 他 事情 不 多 呢 。 


浏览 器 : 即便 是 没有 指定 处 理 程序 的 事件 ， 我 也 需要 
处 理 。 我 需要 捕获 事件 ， 对 其 进行 解读 ， 并 检查 是 否 
有 处 理 程 序 等 待 它 发 生 。 如 果 有 ， 我 就 必须 调用 处 理 
程序 。 

Head First: 事件 这 么 多 ， 你 如 何 跟 蹊 它们 呢 ? 如 末 
有 很 多 事件 同时 发 生 ， 该 怎么 办 呢 ? 毕竟 负责 处 理事 
件 的 人 只 有 你 一 个 。 

浏览 器 : 确实 ， 可 能 在 很 短 的 时 间 内 发 生 很 多 事件 ， 
有 了 时 我 忙 不 过 来 ， 无 法 实时 地 处 理 它们 。 有 鉴于 此 ， 
我 把 事件 都 放 入 队列 ， 再 遍历 这 个 队列 ， 并 在 必要 时 
调用 相应 的 处 理 程序 。 

Head First: 这 像 极 了 我 做 快餐 店 厨 师 的 日 子 。 
浏览 器 : 确实 如 此 ， 如 果 快 餐 店 每 隔 一 秒 左右 就 有 一 
个 订单 的 话 。 

Head First. 你 必须 按 顺 序 一 个 一 个 地 去 处 理 ? 
浏览 器 : 是 的 ， 明 白 这 一 点 对 理解 JavaScript 至 关 重 
要 : 只 有 一 个 队列 和 一 个 控制 线程 。 这 意味 着 只 有 我 
独自 去 逐个 处 理事 件 。 


你 好 ， 很 高 兴 你 能 接受 采访 。 























Ay:+ao 二 去 人/ 镍 
,> 起 底 事 件 
本 周 访谈 : 浏览 器 说 事件 


异步 编码 


Head First:， 对 学 习 JavaScript 的 读者 来 说 ， 这 意味 着 
什么 呢 ? 


浏览 器 : 假设 你 编写 了 一 个 处 理 程序 ， 而 它 需要 执行 
大 量 的 计算 ， 即 需要 占用 大 量 的 计算 时 间 。 只 要 该 处 
理 程序 在 执行 计算 ， 我 就 得 等 待 ， 直 到 它 执行 完毕 ， 
才能 接着 处 理 队 列 后 面 的 事件 。 

Head First: 哇 ， 等 待 代 码 长 时 间 执 行 的 情况 多 吗 ? 


浏览 器 : 这 样 的 情况 时 有 发 生 ， 但 如 果 网 页 或 应 用 程 
序 因 处 理 程 序 执行 时 间 过 长 而 啊 应 缓慢 ，Web 开 发 人 
员 很 快 就 会 发 现 。 因 此 ， 只 要 Web 开 发 人 员 知 道 事 件 
队列 的 工作 原理 ， 这 种 问题 就 不 会 太 遂 见 。 


Head First: 我 们 的 读者 现在 都 知道 事件 队列 的 工作 
原理 了 ! 回 到 事件 ， 有 很 多 不 同类 型 的 事件 吗 ? 


浏览 器 : 很 多 。 有 基于 网 络 的 事件 、 定 时 器 事件 、 与 
网 页 相关 的 DOM 事 件 等 。 有 些 事 件 (如 DOM 事 件 ) 
会 生成 事件 对 象 ， 其 中 包含 很 多 有 关 事 件 的 细 市 。 例 
如 ， 鼠 标 单 击 事件 包含 有 关 单 击 位置 的 信息 ， 按 键 事 
件 包 含有 关 按 下 的 是 哪个 键 的 信息 ， 等 等 。 

Head First: 你 的 很 多 时 间 都 花 在 处 理事 件 上 ， 这 是 
你 利用 时 间 的 最 佳 方式 吗 ? 毕竟 ， 你 还 需 负 责 检 索 、 
分 析 和 演 染 网 页 等 工作 。 

浏览 器 : 花 时 间 来 处 理事 件 非 常 重要 。 这 年 头 ， 你 必 
须 编 写 代 码 来 让 网 页 与 用 户 互 动 并 引人入胜 ， 为 此 必 
须 使 用 事件 。 

Head First: 确实 如 此 ， 傈 单 网 页 的 时 代 一 去 不 复 返 
本 

浏览 器 : 太 对 了 。 噢 ， 天 啊 ， 事 件 队列 就 要 溢出 了 ， 
我 得 赶紧 走 ! 

Head First: 好 的 ， 下 次 再 会 ! 
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事件 队列 


事件 和 队列 


你 知道 ， 济 览 右 维护 着 一 个 事件 队列 。 在 幕后 ， 训 览 右 不 断 地 从 这 
个 队列 中 取出 事件 ， 并 调用 相应 的 事件 处 理 程序 来 处 理 它们 一 一 如 














果 有 的 话 。 
清 注意 ， 我 过 个 处 理 这 些 事 件 。 对 于 
浏览 器 每 个 事件 ， 我 都 调 同 其 处 理 程序 一 一 


如 果 有 的 话 。 





请 注意 ， 又 有 一 个 事件 到 来 了 。 
用 户 刚 单 击 了 另 一 个 元 素 。 


~ 监 器 遍历 这 个 
队列， 次 先 后 
谍 处 理 每 个 事件 。 


| 


浏览 器 逐个 处 理 这 些 事件 ， 明 白 这 一 点 很 重要 。 因 此 ， 应 尽 可 能 让 处 

理 程序 简短 而 高 效 ， 否 则 事件 队列 可 能 包含 大 量 等 待 处 理 的 事件 ， 导 “如果 情况 变 得 极其 楼 糙 ， 将 出 现 一 个 

牙 济 览 基 无 法 攻 时 地 处 理 它们 。 这 会 带 来 什么 本 榴 后 果 呢 ? 界 而 的，/ 对 放 林 。 所 本 和 旨 ， 这 表 
RE 浏览 器 承认 它 已 无 能 为 力 ! 

响应 速度 可 能 非常 缓慢 。 


4 


但 


异步 编 





海盗 船长 得 到 了 一 张 藏 宝 图 ， 需 要 你 帮忙 找 出 宝藏 的 坐标 。 > 
为 此 ， 你 将 编写 一 些 代码 ， 使 在 地 图 上 移动 鼠标 时 显示 其 坐 纤 习 
标 。 下 一 页 提供 了 部 分 代码 ， 但 需要 你 帮忙 补 全 。 % 


等 你 补 全 代码 后 ， 将 鼠标 将 向 X 时 ， 


文 是 地 图 ， 其 中 X 是 宝 补 全 代码 后 ， 
ee MAD 









备注 : 强烈 建议 你 
完成 这 个 练习 ， 因 
为 如 果 你 不 让 海 次 





补 全 后 的 代码 将 在 ， | 知道 宝藏 的 坐标 
地 图 下 方 显示 坐标 . ) 他 们 会 很 生气 ， 后 
果 很 严重 ， 嘲 、 为 


补 全 这 些 代码 ， 你 


> COORDINATES: 10. 20 需要 具备 如 下 知识 


。 


当 鼠 标 在 特定 元 素 上 移动 时 ， mousemove 事 件 通知 相应 的 处 理 程序 ， ee 
元 素 的 属性 onmousemove。 这 样 会 给 这 种 事件 处 理 程序 传递 一 个 event 对 象 ， 其 中 包含 如 下 属 


mmousemove 事 忻 


性 。 
c1LientX 和 Cc1ientY: 鼠标 相对 于 浏览 器 窗口 左边 缘 和 上 边缘 的 距离 ， 单位 为 像素 。 
screenX 和 screenyY: 鼠标 相对 于 设备 屏幕 左边 缘 和 上 边缘 的 距离 ， 单位 为 像素 。 


PageXx 和 PageY: 鼠标 相对 于 网 页 左边 缘 和 上 边缘 的 距离 ， 单位 为 像素 。 
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鼠标 事件 的 练习 






下 面 就 是 所 需 的 代码 。 它 们 在 网 页 中 包 售 了 地 图 ， 并 创建 了 
一 个 用 于 显示 坐标 的 段落 元 素 。 你 需要 补 全 处 理事 件 的 代码 。 
钢 你 好 运 ， 我 们 可 不 想 看 到 你 葬身 海底 | 


<!dqoctyPe html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Pirates Booty</title> 
<script> 
window.onload = init; 


function init() { 


Var map = document.getElementById("map"); 


} 八 、 左 这 里 指定 处 理 程序 。 


function showCoords(eventOb]) { 


Var map = document.getElementById("coords"); 


map.innerHTIML = "Map coordinates: " 


六 二 一 定 vv: 
| 在 这 里 获取 坐标 。 
</script> 
</head> 
<body> 


<img id="map" src="map.Jpg"> 

<p id="coords">Move mouse to find coordinates...</p> 
</body> 
</html> 





:给 习 - 


补 全 代码 后 ， 加 载 这 个 网 由 ， 
并 将 宝藏 的 坐标 记录 在 这 主 。 


异步 编 


但 


从 


其 他 事件 


到 目前 为 止 ， 我 们 介绍 了 三 种 事件 : 加载 事 件 〈 训 览 右 加 载 网 页 完毕 时 发 生 ) 、 
单 击 事 件 (用 户 单 击 网 页 元 素 时 发 生 ) 和 鼠标 移动 事件 《用户 在 元 素 上 移动 鼠标 
时 发 生 ) 。 你 可 能 会 遇 到 很 多 其 他 的 事件 ， 如 与 通过 网 络 收 到 数据 相关 的 事件 、 
训 览 背地 理 定 位 事件 、 基 于 时 间 的 事件 等 。 


对 于 前 面 介 绍 过 的 所 有 事件 ， 为 将 它们 关联 到 处 理 程 序 ， 你 总 是 将 处 理 程序 赋 
给 某 个 属性 ， 如 onload、 onmousemove 或 onclick。, 但 这 种 做 法 并 韭 适用 于 所 
有 事件 。 例 如 ， 对 于 基于 时 间 的 事件 ， 不 是 将 处 理 程 序 赋 给 属性 ， 而 是 调用 函数 
setTimeout 并 癌 它 传递 处 理 程 序 。 


来 看 一 个 示例 : 假设 你 要 在 $ 秒 后 执行 某 种 操作 ， 可 像 下 面 这 样 使 用 setTimeout 
和 处 理 程序 。 








自 先 ， 编 写 一 个 事件 处 理 程序 。 这 个 
WAN i a i 


function timerHandler() { 


alertl("Hey what are you doing just sitting there staring at a blank screen?"); 
} , 一 一 
这 个 事件 处 理 程 序 只 是 显示 一 个 提示 框 。 


ya 在 这 里 ， 我 们 调用 setTimeout。 它 接受 两 个 参 
setTimeout(timerHandler, 5000); 数 ， 事件 处 理 程序 和 时 间 间 隐 (单位 为 毫秒 ) 。 


( 


setTimeout 的 用 法 在 这 里 ， 我 们 让 定 然后 调用 处 理 程序 


与 设置 秒表 类 似 。 寺 器 等 待 5000 台 timerHandler。 
办 (5 秒 ) 。 OI 洗 你 的 
脑力 


eh 试 An Dr 了 如 何 让 提示 框 没完 没 了 
| 试 定时 器 地 每 隔 5 秒 显示 一 次 呢 ? 
别 袖手旁观 ， 该 动手 测试 这 些 代 码 了 1 将 这 些 代 人 码 放 在 一 个 人 简单 的 

HTML 网 页 中 ， 再 加 载 这 个 网 页 。 一 开始 你 什么 都 看 不 到 ， 但 5 秒 后 你 

将 看 到 提示 框 。 








日 日 日 /DrickTock 


i ， 











局 
所 CGC 0 localhost/~Beth/HFJS/chapter9/timer.html ”| 





请 耐心 等 待 ，5 秒 后 你 将 看 到 这 里 RE 
所 示 的 提示 框 。 如 果 几 分 钟 后 还 OO 荆 江 = 
没有 看 到 提示 框 ， 你 也 许 该 跑 计 和 
算 机 一 脚 。 开 个 玩笑 而 已 ， 正 确 
的 做 法 是 检查 你 的 代码 。 
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setTimeout 处 理 程 序 





setTimeout 的 工作 原理 


下 面 了 详细 研究 刚才 发 生 的 情况 。 









好 了 J， 该 开始 了 。 我 有 一 个 定时 器 ， 
它 将 在 7000 毫 秒 后 到 期 ， 局 时 我 以 
调 辕 一 个 处 理 程序 。 





和 在 网 页 加 载 和 过程 中 ,我 们 做 了 7 两 件 事 
情 : 定义 了 一 个 名 为 timerHandler 
的 处 理 程序 ， 调 用 setTimeout 创 建 
了 AAA 
件 。 这 个 事件 发 生 时 ， 特 执行 处 理 程 
序 timerHandler。 


定时 器 由 浏览 ENR 9 
器 管理 。 


浏览 器 跟 踪 所 有 的 定 ， 
器 (可 以 同时 有 多 个 

当 可 六 其 虹 要 调用 的 
处 理 程序 。 








2 在 定时 器 以 毫秒 为 单位 进行 倒 计 
时 的 同时 ， 浏 览 器 继续 完成 其 党 
规 工 作 。 








5000 毫 秒 过 去 ， 定 
时 器 已 到 期 ， 该 调 赎 
处 理 程序 了 。 





© 倒计时 到 零 后 ,浏览 器 调用 处 理 程序 。 








倒计时 结束 ， 触发 了 时 间 事件 。 浏 览 器 ; 
周 用 你 
传 入 的 函 函数 ， 以 执行 相应 的 事件 处 理 程序 








处 理 程序 被 调 周 ， 人 它 创 建 一 个 提示 枢 着 在 浏览 器 
中 显示 出 来 。 





已 调 峡 处 理 程序 ， 对 足 
时 器 的 处 理 到 此 结束 。 





4 
function timerHandler() { 


alert("Hey what are you doing Just sitting there staring at a blank screen?"); 





和 se 浏览 器 执行 事件 处 理 程序 ， 你 看 一 > © Fe eo cone jes tong tere sonng ate 
到 了 这 个 提示 框 。 Ci 
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和: 
下 
其 


但 


从 






使 用 setTimeout 了 时， 向 一 个 
配 数 传递 了 另 一 个 函数 ， 我 这 
样 理解 对 吗 ? 







好 眼力 ! 你 还 记得 本 草 前 面 说 过 再 不 似 从 前 的 话 吗 ? 在 电影 
《绿野仙踪 》 中 ， 这 名 台词 (you aren't in Kansas anymore) 过 
后 ， 画 面 就 从 黑白 变 成 了 彩色 的 。 回 到 你 的 问题 ， 我 们 定义 了 
一 个 国 数 ， 再 将 它 传递 给 setTimeout ( 它 实 际 上 是 个 方法 ) 。 


setTimeout(timerHandler, 5000); 


在 议 里 ， 将 一 个 指向 函数 的 引用 传递 
给 了 setTimeout ( 另 一 个 函数 ) 。 


我 们 为 何 这 样 做 呢 ? 这 样 做 意味 着 什么 呢 ? 从 本 质 上 说 ， 力 
数 setTimeout 创 建 一 个 倒计时 的 定时 绢 ， 并 将 其 关联 到 一 
个 处 理 程序 。 当 定时 器 倒计时 到 零 后 ， 将 调用 这 个 处 理 程序 。 
为 告诉 setTimeout 应 调用 哪个 定时 如 ， 需 要 问 它 传递 一 个 指 
器 处 理 程序 函数 的 引用 。setTimeout 将 这 个 引用 存储 起 来 ， 
供 定时 絮 到 期 后 使 用 。 


如 果 你 说 “这 合乎 情理 ”， 那 就 太 好 了 。 但 是 ， 你 也 可 能 
说 : “将 一 个 函数 传递 给 另 一 个 函数 ?你 脑子 没 进 水 吧 ? ” 
如 采 你 这 样 说 ， 你 很 可 能 以 前 使 用 过 C 或 Java 等 语言 。 在 这 些 
语言 中 ， 像 这 样 将 一 个 函数 传递 给 另 一 个 函数 根本 行 不 通 ， 
但 在 JavaScript 中 ， 这 行 得 通 。 事 实 上 ， 能 够 传递 函数 提供 了 
一 种 强大 的 功能 ， 在 编写 响应 事件 的 代码 时 尤其 如 此 。 


此 时 你 很 可 能 说 : “我 好 像 有 点 明白 了 ,但 不 太 确 定 。 ”如 
果 是 这 样 ， 也 不 用 担心 。 就 目前 而 言 ， 这 样 想 就 可 以 了 : 问 
setTimeout 传 递 了 一 个 指 癌 处 理 程序 的 引用 ， 定 时 器 到 期 
后 ， 将 调用 该 处 理 程序 。 下 一 董 将 更 详细 地 讨论 函数 以 及 如 
何 使 用 它们 (如 将 它们 传递 给 其 他 函数 ) ， 因 此 现在 只 需 这 
样 理解 就 可 以 了 。 
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天 于 事件 的 问题 





: 络 习 ; 

这 是 代码 。 

\ var tick = true; 
function ticker() { 

IE (tick) { 
console.log("Tick"); 
tick = false; 

} else { 
console.log("Tock"); 
tick = true; 

} 


} 
setInterval(ticker, 1000); 


请 在 这 里 记录 你 的 分 析 。 


\ 


y 
[5) s 有 办 法 停止 setInterval1L 吗 ? 


AAA ，。 
定时 器 ， 可 将 其 传递 给 ee 


了 
® 
虽 ) : 你 说 过 ，setTimeout 是 一 个 方法 ， 但 它 看 起 来 像 
一 个 函数 。 它 是 哪个 对 象 的 方法 呢 ? 


AAA ， 

人， 好 了 眼力。 严格 地 说 ， 它 应 写作 window.setTimeout， 
但 由 于 window 是 全 局 对 象 ， 可 省 略 对 和 象 名 ,直接 写 作 
setTimeout。 实 际 编写 代码 时 经 常 这 样 做 。 


(3): 引用 属性 window.onload 时 ， 也 可 省 略 window 
吗 ? 


A 

叭 "， 可 以 ， 但 大 多 数 人 都 不 会 这 样 做 ， 因 为 onload 是 一 
常见 的 属性 名 (其 他 元 素 也 可 能 有 属性 onload) 。 如 果 

骨 略 window， 将 让 人 不 知道 指 的 是 哪个 对 和 象 的 onload 属 性 


请 看 下 面 的 代码 ， 
类 似 于 setTimeout， 但 存在 细微 的 差别 。 


你 能 搞 清楚 setInterval 是 做 什么 的 吗 ? 它 
答案 见 本 章 末 尾 。 


java%cript 控 制 台 
Tick 
Tock 
Tick 
Tock 
piel 4 


Tock 
Tick 
Tock 





[9): 通过 给 onload 赋 值 ， 我 们 将 一 个 处 理 程序 关联 到 了 
相应 的 事件 。 但 通过 使 用 setTimeout， 好 像 可 以 给 任意 
数量 的 定时 器 指定 处 理 程序 ， 是 这 样 的 吗 ? 

RA 

他， 没 错 。 调 用 setTimeout 时 ， 实 际 上 是 创建 了 一 个 
定时 器 ， 并 指定 了 与 之 相关 联 的 处 理 程序 。 你 可 以 创建 任 
意 数量 的 定时 路， 浏览 器 将 跟 踩 每 个 定时 器 及 其 相关 联 的 


处 理 程 序 。 
4 四 
上 o) : 还 有 其 他 向 函数 传递 函数 的 示例 取 ? 


AAA , 
合 '， 这 样 的 例子 很 多 。 实 际 上 ， 你 将 发 现 ， 在 JavaScript 


中 传递 吕 数 的 情形 非常 普遍 。 不 仅 很 多 内 置 遂 数 (如 
setTimeout 和 setInterval) 都 将 函数 作为 参数 ， 你 编 
写 的 很 多 函数 也 会 将 甩 数 作为 参数 。 但 这 不 是 故事 的 全 部 ， 
下 一 章 将 深入 探讨 这 个 主题 。 届 时 你 将 发 现 ， 在 JavaScript 
中 ， 可 以 以 各 种 有 趣 的 方式 使 用 函数 。 









大 家 好 ， 我 想 完 成 这 个 猜 周游 戏 ， 
目标 是 在 册 户 单 击 周 像 2 秒 后 ， 让 周 
像 重 新 变 模 糊 。 








Joe: 这 听 起 来 很 棒 。 我 肯定 你 会 使 用 set- 


Timeout, 
Frank: 我 确实 打算 这 样 做 ， 但 不 知道 该 如 何 
确定 要 让 哪 幅 图 像 重 新 变 模糊 。 
Jim: 我 没 听 明白 。 


Frank: 在 用 户 单 击 图 像 后 ， 我 要 设置 一 个 两 
秒 钟 后 到 期 的 定时 着 。 该 定时 禹 到 其 后， 将 调 
用 我 编写 的 处 理 程序 rebluz 


Joe: 在 reblur 中 ， 你 需要 确定 该 让 哪 幅 图 像 重 新 





”Frank Joe 


Cjim 
变 模 糊 ? 

Frank: 没 错 。 我 没有 癌 这 个 处 理 程 序 传递 任何 参数 ， 它 只 是 在 定时 大 到 期 

后 被 神 览 器 调用 ， 因 此 我 没 法 告诉 处 理 程序 ， 该 让 哪 幅 图 像 重新 变 模糊 。 我 

好 像 卞 区 了 。 


Jim :， 你 查看 了 setTimout API 吗 ? 





Frank: 没有 ， 我 只 知道 Judy 告 诉 我 的 : setTimeout 将 一 个 国 数 和 一 个 时 
间 间 隔 〈 单 位 为 宣 秒 ) 作为 参数 。 

Jim: 调用 setTimeout 时 ， 你 还 可 以 传 入 第 三 个 参数 ;触发 时 间 事件 时 ， 这 
个 参数 将 被 传递 给 处 理 程序 。 





Frank: 哦 ， 那 太 好 了 。 ee ain 它 指 问 要 重新 变 模糊 的 图 像 。 


那么 调用 处 理 程序 时 ， 将 把 这 个 引用 传递 给 它 ? 
Jim: 没 错 

Frank: Joe， 你 听 明 白 了 吗 ? 

Joe: 昕 明白 了 ， 咱 们 来 试 一 试 。 


各 


牛 


过 


但 
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在 猜 图 游戏 中 使 用 setTimeout 


AP ]】 YY 由 
完成 猜 冉 游戏 
来 完成 猜 图 游戏 的 最 后 一 道 工序 。 我 们 要 实现 的 目标 如 下 : 在 图 像 的 清 
晰 版 显示 几 秒 之 后 ， 让 它 上 自动 重新 变 模 糊 。 刚 才 说 过 ， 调 用 setTime- 
out 时 ， 可 指定 一 个 要 传递 给 事件 处 理 程序 的 参数 ， 如 下 所 示 : 


window.onload = function() { 


1 


var Images = document.getElementsByTagName("img"); 
for (var i = 0; i < images.length; I++) { 


images[i].onclick = showAnswer; 


function showAnswer(eventOb]j]) { 


Var Image = eventObj.target.; 
Var name = image.id; 
name = name + ".jJpg"’ 


image.src = name; 


这 些 代码 与 前 面相 同 ， 
没有 任何 变化 。 


但 现在 向 用 户 显示 请 晰 版 图 像 
时 ， 同 时 调用 setTimeout 来 他 | 
建 个 将 在 2 秒 后 触发 的 事件 。 


我 们 将 处 理 程序 指定 为 reblur， 将 时 


setTimeout(reblur, 2000, image); 间 间 隅 设置 为 2000 毫 秒 (2 秒 ) ， 
并 将 第 三 个 参数 指定 为 要 重新 变 模 


function reblur(image) { 
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var name = image.id; 
name = name + "blur.jpg"’ 


image.src = name; 


\ 


这 个 处 理 程序 获取 图 像 的 id， 据 此 得 到 
模糊 版 图 像 的 名 称 。 将 属性 src 设 置 为 
该 名 称 后 ， 将 用 模糊 版 图 像 蔡 换 清 蜥 
县 图 像 。 


糊 的 图 像 。 


这 样 ， 这 个 处 理 程 序 被 调用 时 ， 将 


把 去 重新 变 模 糊 的 图 像 传递 给 它 。 


ee 
ee 
本 
ee 


在 IE8 和 更 早 版 本 的 浏览 器 中 ，set- 
Timeout 不 支持 额外 的 参数 ， 


“ 几 大 性 


冯 三 ， 这 些 代码 不 适用 于 IE8 和 更 早 的 
版 本 ， 但 阅读 本 书 时 ， 你 使 用 的 应 该 
不 是 IE8 本 书后 面 将 介绍 另 一 种 处 理 方式 ， 让 代 
码 适 用 于 IE8 和 更 早 版 本 的 浏览 器 。 





小 心 


和 
ee 
LA 
人 
eeeeeeeeeee ee 
ee 
ee 





浏 误 征 时 器 
添加 的 代码 虽然 不 多 ， 


让 图 像 重 新 变 模 糊 。 这 








却 让 这 个 猜 图 游戏 大 不 相同 。 现 在 ， 用 户 单 击 图 像 
时 ， 剖 览 右 将 通过 定时 吉事 件 在 幕后 跟踪 何 时 需要 调用 处 理 程序 reblIur， 
给 人 以 异步 的 感觉 : 何 时 单 击 图 像 由 用 户 决 定 ， 但 
在 笑 后 ， 将 根据 单 击 事 件 和 定时 如 事件 异步 地 调用 代码 。 这 里 并 没有 任何 





高 深 的 算法 控制 该 在 何 时 调用 哪些 代码 ， 有 的 只 是 一 系列 设置 、 创 建 和 啊 


应 事件 的 代码 。 


请 快速 单 击 大 量 的 图 像 ， 对 这 个 游戏 
进行 详尽 的 测试 。 效 果 始 终 如 你 期 户 
的 那样 吗 ? 请 参阅 前 面 的 代码 ， 想 想 
浏览 器 是 如 何 跟踪 所 有 需要 重新 变 模 
糊 的 图 像 的 。 


y 
[5) s。 调用 setTimeout 时 ， 只 能 向 
指定 的 处 理 程 序 传 递 一 个 参数 吗 ? 


AAA ， 

吟 ” ， 不 是 这 样 的 。 实 际 上 ， 你 可 以 
向 处 理 程序 传递 任意 数量 的 参数 : 0 
个 、1 个 或 更 多 。 


y 
[5) s SetTimeout 为 何不 回 事件 处 
理 程 序 传递 一 个 事件 对 象 ? 


A 

只 ”， 事件 对 篆 主 要 用 于 DOM 事 件 处 
理 程序 。setTimeout 不 向 处 理 程 序 
传递 事件 对 象 ， 因 为 时 间 事 件 并 非 由 
特定 的 元 素 触 发 。 


eoe yess he Mrt 其 
© CD localhost/~8eth/HFEIS/chapterg/ wr 
4 
Ls 


和: 
时 
其 


但 


从 


现在 当 你 单 击 图 像 时 ， 将 显示 其 
人 清晰 版 ， 并 在 2 秒 后 重新 变 模糊 。 








世上 没有 
晶 知 的 问题 


y 
(5); showAnswer 是 一 个 处 理 程序 ， 
并 且 在 其 代码 中 创建 了 另 一 个 处 理 程 
序 reblur。 是 这 样 的 吗 ? 

A 网 

， 没 错 。 实 际 上 ， 在 JavaScript 中 ， 
这 样 的 做 法 很 常见 : 在 处 理 程 序 中 ， 
创建 其 他 事件 处 理 程序 再 正常 不 过 了 ， 
这 就 是 本 章 开 头 所 说 的 编程 风格 一 一 
异步 编程 。 为 创建 猜 图 游戏 ， 我 们 并 
没有 编写 按 从 头 到 尾 的 顺序 执行 的 算 
法 ， 而 是 创建 了 一 些 在 事件 发 生 时 执 
行 的 事件 处 理 程序 。 它 们 跟踪 被 单 击 
的 图 像 ， 显 示 其 清晰 版 ， 再 让 图 像 重 
新 变 模 糊 。 


人 
上 o) ; 右 量 于 DOM 的 事件 、 定 时 器 束 
件 等 。 是 不 是 有 很 多 不 同类 型 的 事件 ? 


A 

Ww 8 在 JavaScript 中 ， 你 处 理 的 很 多 事 
件 都 是 DOM 事 件 〈 如 单 击 元 素 触 发 的 
事件 ) 或 定时 器 事件 (使 用 setTime- 
out 或 setInterval 创 建 的 事件 ) 。 
还 有 与 API 相 关 的 事件 ， 如 Geolocation、 
LocalStorage、Web Worker 等 JavaScript 
API 触 发 的 事件 。 有 关 这 些 API 的 详 
细 信 息 ， 请 参阅 《Head First HTMLS5 
Programming 中 文 版 》。 最 后 ， 还 
有 一 系列 与 IO 相关 的 事件 ， 如 使 用 
XmlHttpReguest 向 Web 服 务 请 
求 数据 时 引发 的 事件 以 及 使 用 Web 


套 接 字 引 发 的 事件 。 同 样 ， 有关 
XmlHttpRequest 的 详细 信息 ， 请 参 


阅 《Head First HTMLS Programming 中 
文 版 》。 
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使 用 mouseover 事 件 















大 家 好 ， 台 式 机 周 户 希望 将 鼠标 指向 周 像 时 
不 单 击 就 能 显示 其 清晰 版 。 我 们 能 够 突现 这 
种 功能 吗 ? 


Judy : 为 实现 这 种 功能 ， 需 要 使 用 鼠标 移动 事件 。 要 给 元 素 的 这 种 事件 指定 
处 理 程序 ， 可 使 用 属性 onmouseover: 





myElement.onmouseover = myHandler; 


Judy: 另外 ， 鼠 标 移出 元 素 时 ，mouseout 事 件 将 指出 这 一 点 。 要 为 这 种 事 
件 指定 处 理 程 序 ， 可 使 用 属性 onmouseout。 





请 重新 编 与 表面 的 代码 ， 使 得 在 用 户 将 鼠标 指向 图 像 元 素 和 
将 鼠标 移出 图 像 元 素 时 ， 分 别 显示 清晰 版 图 像 以 及 让 图 像 重 
新 变 模糊 。 务 必 对 你 编写 的 代码 进行 测试 ， 并 查看 本 章 末 尾 


的 答案 。 


\ 
在 这 里 编写 JavaScript 代 码 。 














咎 


步 编码 


已 
开 





经 习 


编写 好 图 像 猪 测 游戏 后 ，Judy 又 编写 了 一 些 代 码 ， 在 每 周 
团队 例会 中 要 求 大 家 进行 审核 。 实 际 上 ， 她 发 起 了 一 个 小 
小 的 竞赛 : 谁 能 第 一 个 正确 地 指出 这 些 代 码 的 功能 ， 就 奖 
励 谁 一 顿 午餐 。 谁 将 获胜 呢 ? Jim、Joe、Frank 还 是 你 ? 


<!dqoctyPe html> 

<htmlL lang="en"> 
<head> 

<meta charset="utf-8"> 





<title>Don't resize me, I'm ticklish'i</title> 
<script> 
function resize() { 
var element = document.getElementById("display"); 
element.innerHTML = element.innerHTML + " that tickles!"; 
} 
</script> 
</head> 
<body> 
<p id="display"> 
Whatever you do, don't resize this window! I'm warning Youl 
</p> 
<script> 
window.onresize = resize; 
</script> 
</body> 
</html> 


洁 存 这 里 描述 这 些 代码 的 功能 。 代 码 中 涉及 哪些 事 

八 、 件 是 如 何 指定 处 理 程序 的 ?这 些 事件 在 何 时 发 生 ? 
8 只 提 述 这些 代 码 的 功能 ， 也 请 在 浏览 器 中 运行 一 下 
它们 
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函数 的 代码 实验 室 


、 ra 7 
代码 实验 室 
我 们 发 现 了 一些 极度 可 颖 的 代码 ， 需 要 你 帮 忆 测试 。 我 们 对 这些 代码 进行 7 了 基本 分 析 ， 它 们 看 起 


来 是 完全 标准 的 JavaSceript 人 代码， 但 有 些 地 方 有 点 怪 。 下 面 是 两 段 代 码 ， 你 吉 要 找 出 每 臣 中 伪 异 的 
地 方 ， sp a en 和 再 尝 试 分 析 它 们 到 底 是 做 什么 的 ， 并 将 这 些 记 录 在 本 页 中。 要 查 


看 我 们 的 分 析 ， 请 参阅 下 一 


一 代码 片段 #1 


加 2 return x+ 1. re 
JI 一 Re 
Var six = =addOne(s);— A 


es 
EE 
Ta 


Ep 


-一 






<“ 码 片段 #2 
-Onl0ad = =functionO { 





or 





乍 一 看 ， 这 些 代 码 好 像 只 是 定义 了 
一 个 函数 。 这 个 函数 将 传 入 的 参数 


BEES 加 1， 再 返回 结果 。 


但 仔细 观察 后 发 现 ， 这 不 是 普通 的 
a 函数 定义 ， 而 是 声明 了 一 个 变量 ， 





varaddOne=function(x){ 


























站 并 将 一 个 没有 名 称 的 函数 赋 给 它 。 

上 接 下 来 调用 了 这 个 函数 。 调 用 是 通 

0 过 变量 名 ， 而 不 是 函数 定义 中 指定 
Var Six = addOne(5); 的 名 称 进 行 的 。 


一 一 一 -一 -一 一 一 -一 -一 -= 一 一 -一 <== = - 二 = = 可 -am 了 mr 工人 一 一 一 一 一 一 一 -= 一 一 一 = 一 一 一 


确实 很 奇怪 ， 虽 然 这 让 我 们 想起 在 
对 象 中 定义 方法 的 方式 。 


这 里 的 情况 看 起 来 与 前 面 类 似 。 
不 是 定义 函数 后 ， 再 将 其 名 称 赋 
给 属性 window.onload， 而 是 直接 
将 函数 赋 给 这 个 属性 。 同 样 ， 这 
里 也 设 有 指定 函数 的 名 称 。 














我 们 将 这 些 代 码 添 加 到 HTML 页 面 中 ， 并 进行 测试 。 它 们 的 作用 看 起 来 与 预期 的 相同 。 对 
于 代码 片段 #1， 调 用 赋 给 了 变量 add0ne 的 函数 时 ， 得 到 的 结果 比 传 入 的 数字 大 1， 好 像 
完全 正确 。 对 于 代码 片段 #2， 网 页 加 载 后 显示 了 一 个 提示 框 ， 其 中 包含 消息 “The page is 
loaded! ，。 


这 些 测试 表明 ， 定 义 函 数 时 好 像 可 以 不 指定 名 称 ， 而 这 样 的 函数 定义 可 放 在 任何 需要 表达 
式 的 地 方 。 
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( -一 点 
< 


大 多 数 JavaScript 代 码 都 是 用 来 响应 事件 的 。 
可 编写 代码 来 响应 的 事件 类 型 众多 。 


要 响应 事件 ， 可 以 编写 并 注册 一 个 事件 处 理 程 
序 。 人 例如， 要 指定 单 击 事 件 处 理 程 序 ， 可 将 事 
件 处 理 程序 赋 给 元 素 的 onc1Lick 属 性 。 


并 非 必须 啊 应 所 有 的 事件 ， 可 以 只 处 理 你 感 兴 
趣 的 事件 。 


我 们 将 函数 用 作 事 件 处 理 程 序 ， 因 为 它们 让 我 
们 能 够 编写 在 事件 发 生 时 再 执行 的 代码 。 


编写 用 于 处 理事 件 的 代码 不 同 于 从 头 到 尾 执 行 
的 代码 。 事 件 处 理 程 序 的 运行 时 间 和 运行 顺序 
都 是 不 确定 的 ， 它 们 是 异步 的 。 

发 生 在 DOM 元 素 上 的 事件 (DOM 事件 ) 导致 一 
个 event 被 传递 给 事件 处 理 程序 。 
event 对 象 包 含 一 些 属 性 ， 这 些 属 性 提供 了 
有 关 事 件 的 额外 信息 ， 其 中 包括 事件 的 类 型 
("click" 或 "10agd") 和 目标 (触发 事件 的 对 





在 较 旧 的 IE 版 本 (lIE8 和 更 早 的 版 本 ) 中 ， 使 用 
的 事件 模型 不 同 于 其 他 浏览 器 。 有 关 这 方面 的 
详细 信息 ， 请 参阅 附录 。 


可 能 在 短 时 间 内 发 生 很 多 事件 。 发 生 的 事件 大 
多 ， 浏 览 器 无 法 实时 地 处 理 时 ， 这 些 事件 将 按 
发 生 的 顺序 存储 到 事件 队列 中 ， 让 浏览 器 能 够 
依次 调用 每 个 事件 的 处 理 程序 。 

如 果 事 件 处 理 程序 执行 的 计算 非常 复杂 ， 将 导 
致 队 列 中 的 其 他 事件 无 法 得 到 及 时 处 理 ， 因 为 
浏览 锅 每 次 只 能 执行 一 个 事件 处 理 程 序 。 

前 数 setTimeout 和 setInterval 都 用 于 创建 
在 指定 时 间 过 后 发 生 的 事件 。 

方法 getElementByTagName 返 回 一 个 
NodeList， 其 中 包含 0 个 、1 个 或 更 多 的 
element 对 象 。NodeList 类 似 于 数组 ， 你 可 
以 对 其 进行 迭代 。 


事件 祥 基 锚 


load 
(浏览 器 加 载 网 页 完毕 后 


click (或 触发 的 事件 。 


异步 编码 


keypress 


用 户 按 下 任何 键 都 将 


mousemove 
触发 这 个 事件 。 


在 元 素 上 移动 鼠标 时 ， 
将 触发 这 个 事件 ， 


音 
C 在 网 有 治 凶 必 谤 人 
奖 ) unload 
贷 。 4 
用 户 关闭 浏览 器 窗口 或 切换 


CC 0 mouseout 
个 事件。 


名 鼠标 指向 元 表 用 户 将 鼠标 从 元 素 上 移 
We 开 时 将 触发 这 个 事件 。 
resize 
C 每 当 用 户 调整 浏览 器 窗 
O 的 大 小 时 ， 都 将 触发 
这 个 事件 。 


touchend 


用 户 停 止 触摸 时 ， 将 甬 这 
个 事件 。 人 


pause | 
用 = 单 击 deoy 元 素 的 暂停 
纪 时 ， 将 触发 这 个 事件 。 





我 们 介绍 了 load、click、mousemove.、 
mouseover、mouseout、resize 事 件 以 及 


定时 器 事件 ， 这 些 只 是 全 部 事件 的 冰山 一 角 。 


这 里 的 事件 群英 谐 列 出 了 你 肯定 会 遇 到 且 在 
学 习 Web 编 程 时 必须 探索 的 事件 。 


你 现在 的 位 置 ， 419 


JavaScript 填 字 游 戏 





请 利用 你 党 


JavaScript 迷 学 游戏 


握 的 事件 知识 ， 完 成 这 个 填 字 游戏 。 

















Th 











i 


横 问 

1. 使 用 事件 对 象 的 这 个 属性 ， 可 获取 事件 发 生 的 时 间 。 
3. 用 户 单 击 鼠 标 时 触发 的 事件 。 

8. 事件 是 以 什么 方式 处 理 的 ? 

12. 5000 蛇 秒 相 当 于 多 少 秒 ? 

13. 根据 标签 名 从 DOM 中 获取 多 个 元 素 的 方法 。 

14. 设计 用 于 响应 事件 的 国 数 被 称 为 事件 。 
15. 方法 setTimeout 用 于 创建 什么 事件 ? 

16. 放 贤 融 只 有 一 个 控制  _。 

17. 浏览 絮 每 次 只 执行 一 个 事件 。 

19. 在 传递 给 mouseover 事 件 处 理 程序 的 事件 对 象 中 ， 
包含 的 表示 鼠标 坐标 的 属性 。 

20. 对 于 DOM 事 件 处 理 程序 ， 将 回 它 传递 一 个 事件 
21. 要 问 时 间 事 件 处 理 程序 传递 参数 ， 可 通过 
setTimeout 的 第 儿 个 参数 进行 传递 ? 
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纵向 

1. 用 户 在 触摸 屏 设 备 上 触摸 时 ， 将 触发 的 事件 。 
2. zero.jpg 是 谁 的 画像 ? 

4. 电影 《 绿 野 仙 玉 》 中 的 台词 “you’re not in 
anymore”， 用 来 说 明 开 始 事 件 编 程 后 的 情形 非常 贴切 。 
5. oy 可 以 问 函数 传递  _。 

6. 如 果 短 时 间 内 发 生 的 事件 太 多 ， 六 览 絮 将 把 这 些 囊 
oe 事件 中 。 





9. 要 让 时 间 事件 反复 地 发 生 ， wa 数 ? 

10. 要 指定 网 页 加 载 事件 处 理 程序 ， 可 使 用 window 对 
象 的 哪个 属性 ? 

11. 本 章 一 个 参与 讨论 如 何 编写 代码 的 人 物 。 

14. 要 给 时 间 事 件 指 定 事件 处 理 程序 , 可 将 作 
为 第 一 个 参数 传递 给 setTimeout。 

15. 事件 对 和 象 的 一 个 属性 ， 让 你 能 够 确定 图 像 猿 测 游戏 
用 户 单 击 的 是 哪 幅 图 像 。 
18. 一 种 程序 执行 方式 ， 
以 这 种 方式 执行 的 。 


包含 事件 处 理 代 码 的 程序 不 是 


可 
是 
其 


但 


从 





Se 
挑选 上 面 列 出 的 两 个 事件 。 如 果 浏 览 器 能 够 在 这 些 事 件 


发 生 时 发 出 通知 ， 你 能 编写 哪些 有 趣 的 代码 来 啊 应 这 些 
事件 ? 


以 用 户 提 交 表 单 时 触发 的 事件 为 例 。 如 果 发 生 这 种 事件 时 会 通知 
尔 ， 你 可 获取 用 户 在 表单 中 填写 的 所 有 数据 ， 并 通过 检查 确认 它们 
都 是 有 效 的 。 (例如 ， 在 电话 号 码 文本 框 中 输入 的 东西 像 电话 号 
码 ， 或 者 所 有 必须 填写 的 文本 框 都 不 为 空 。) 执行 这 种 检查 后 ， 就 
可 以 将 表单 提交 给 服务 器 了 。 


鼠标 移动 事件 呢 ? 如 果 用 户 移动 鼠标 时 你 会 得 到 通知 ， 你 就 可 以 创 
建 直接 在 浏览 器 中 运行 的 绘图 应 用 程序 。 


如 果 用 户 滚 动 网 页 时 你 会 得 到 通知 ， 你 就 可 以 做 一 些 有 趣 的 事件 ， 
如 滚动 到 图 像 所 处 的 位 置 时 显示 它们 。 
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练习 答案 






变 身 浏览 器 答案 


下 面 是 猜 周 游戏 的 代码 ， 你 的 任务 是 变 身 浏览 器 ， 搞 清楚 每 个 
事件 发 生 后 该 如 何 做 。 完 成 这 个 缘 义 后 ， 清 查看 本 章 末 尾 的 答 
案 ， 看 看 你 是 否 都 明白 了 。 答 案 如 下 。 


window.onload = init; 
function init() { 
Var image = document.getElementById("zero"); 


image.onclick = showAnswer; 


} 


function showAnswer() { 
var image = document.getElementById("zero"); 


image.src = "Zero.]Pg": 


} 
网 页 加 载 时 ……… 定义 隙 数 init 和 showAnswer。 


将 init 指 定 为 加 载 事 件 处 理 程序 。 


二 、 
| 人 调用 加 载 事件 处 理 程序 init。 
夫 取 id 为 zero 的 图 像 元 豆 。 


图 像 单 击 事件 发 生 
时 …… 
获取 id 为 zero 的 图 像 元 豆 。 


将 其 src 属 性 设置 为 “zerojpg 。 


将 该 图 像 元 素 的 单 击 事件 处 理 程 序 设置 为 showAnswer。 








> FAP 1 


全 亲 





前 面 说 过 ， 表 示 DOM 事 件 的 事件 对 象 包含 一 些 属性 ， 它 们 提供 了 有 关 事 件 的 额 
外 信息 。 下 面 是 事件 对 象 可 能 包含 的 其 他 一 些 属性 ， 请 将 每 个 属性 及 其 用 途 连 接 


target 


type 


timeStamp 


keyCode 
clientX 
| 六 


clientY 


touches 





要 确定 用 户 单 击 的 位 置 离 浏 览 右 窗口 的 上 边缘 
有 多 还 ?使 用 我 吧 。 


我 存储 看 触发 事件 的 对 象 。 我 可 以 古 各 种 不 同 
的 对 象 ， 但 通 第 是 元 素 对 象 。 








在 触摸 设备 上 ， 可 使 用 我 来 确定 用 户 使 用 了 多 
少 根 手指 来 触 模 屏 硕 。 


我 是 一 个 字符 串 ， 如 "click" 或 "10ad"， 指 出 
了 发 生 的 是 哪 种 事件 。 


起 知道 事件 是 何 时 发 生 的 ? 我 是 可 向 你 提供 这 


种 信息 的 属性 。 请 注意 ， 较 旧 的 正版 本 不 


文 持 属性 timeStamp。 


要 确定 用 户 单 击 的 位 置 离 浏 览 绒 窗口 的 左边 缘 
有 多 延 ? 使 用 我 吧 。 








我 能 告诉 你 用 户 刚 按 下 了 哪个 键 。 











py TE 一 一 上 人， I ED 
人/ 于 Il 7 Do 全 》 
小 下 1 日 J4 忆 直 


异步 编码 
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练习 答案 









4 
7 
各 \ 
\ 


海盗 船长 得 到 了 一 张 藏 宝 图 ， 需 要 你 帮忙 找 出 宝藏 的 坐标 。 为 
此 ， 你 将 编 与 一 些 代 码 ， 使 在 地 图 上 移动 鼠标 时 显示 其 坐标 。 
下 面 就 是 所 需 的 代码 。 它 们 在 网 页 中 包含 了 地 图 ， 并 创建 了 一 
个 用 于 显示 坐标 的 段 党 元 素 。 你 需要 补 全 处 理事 件 的 代码 。 议 
你 好 运 ， 我 们 可 不 想 看 到 你 葬身 海底 ! 答案 如 下 。 





<Idoctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Pirates Booty</title> 
<script> 
window.onload = init; 
function init() { 
var map = document.getElementById("map"); 
map.onmousemove = showCoords; 


function showCoords(eventOb]) { 


var map = document.getElementById("coords"); 
var x = eventObj.clientX; 
vary = eventObj.clientY; 


map.innerHTIML = "Map coordinates: " 
二 入" Vv 
} 
</script> 

</head> 
<body> 

<img id="map" src="map.jpg"> 

<p id="coords">Move mouse to find coordinates...</p> 
</body> 


</html> 我 们 将 鼠标 指向 Xx 时， 显示 的 
坐标 为 : 200, 190 


请 看 下 面 的 代码 ， 你 能 摘 清 楚 setInterval 是 做 什么 的 吗 ? 马 
类 似 于 setTimeout， 但 存在 细微 的 差别 。 


答案 如 下 。 





\ var tick = true; 


JavaScript 控 制 全 


function ticker() { 





if (tick) { Rk 
console.log("Tick"); 

tick = false; oe 

La Tick 

console.log("Tock"); Tock 

tick = true; Tick 

} Tock 

} Tick 

. 人 Tock 

setInterval(ticker, 1000); 
这 是 输出 。 


请 在 议 里 记录 你 的 分 析 。 
与 setTimeout 一 样 ，setinterval 的 第 一 个 参数 也 是 事件 处 理 程序 ， 第 二 个 参数 也 是 时 间 
问 陋 。 

但 不 同 于 setTimeout，setlnterval 执 行事 件 处 理 程 序 多 次 ; 实际 上 是 不 断 地 执行 ， 设 
完 没 了 。 (实际 上 ， 可 以 让 它 停止 执行 事件 处 理 程序 ， 如 下 所 示 。) 在 前 面 的 示例 
中 ，setlnterval 每 隔 1000 毫 秒 (1 秒 ) 调用 处 理 程序 ticker 一 次 ， 而 处 理 程 序 ticker 根 


据 变 量 tick 的 值 决定 在 控制 台中 显示 Tick 还 是 Tock。 


也 就 是 说 ，setlnterval 在 定时 器 到 期 时 触发 事件 ， 并 重 局 定时 器 。 


可 将 setlnterval 返 回 的 结 果 
存储 在 一 个 变量 中 …… 


var 七 = setInterval(ticker, 1000); 


配合 5 (2) ， 
clearInterval(t); 人 一 在 保 止 间 国 定时 器 时 调用 clearlnterval， 
并 将 这 个 变量 传递 给 它 。 
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练习 答案 


请 重新 编写 前 面 的 代码 ， 使 得 在 用 户 将 鼠标 指向 图 像 元 素 和 将 
鼠标 移出 图 像 元 素 时 ， 分 别 显示 清晰 版 图 像 以 及 让 图 像 重新 变 
模糊 。 务 必 对 你 编写 的 代码 进行 测试 。 答 案 如 下 : 





QW Ol 
省、 


window.onload = function() { 


var images = document.getElementsByTagName("img"); 


大 :多 le 
for (var i = 0; i < images.length; i++) { 首先 ， Da A i 
赋 给 属性 onlick 的 语句 。 


然后 ， 将 这 个 事件 处 理 程序 赋 给 图 


Images[I] .onmouseover = showAnswer; 像 元 素 的 属性 onmouseover。 


Images[I].onmouseout = reblur; 
) ms 接 下 来 ， 需 要 将 reblur 用 作 mouse- 


out 事 件 处 理 程 序 (而 不 是 定时 器 事 
}; 件 处 理 程序 ) 。 为 此 ， 我 们 将 replur 
function showAnswer(leventOb]j]) { 冉 给 图 像 元 率 的 属 性 onmouseout。 
Var image = eventObj.target.; 
var name = image.id; 
name = name + ".jJpg"’ 


image.src = name; 
我 们 不 再 利用 定时 器 来 让 图 像 重 新 
| 变 模 由 ， 而 是 在 用 户 将 鼠标 移出 图 
7 像 元 素 时 让 图 像 重 新 变 模糊 。 


签 于 reblur 现 在 被 用 作 mouseout 事 件 处 理 程 序 ， 


为 确定 应 让 哪 幅 图 像 重 新 变 模糊 ， 必 须 使 用 事 


function reblur(eventoO 


var image = eventOb]J.target.; 件 对 象 。 与 showAnswer 中 一 样 ， 我 们 使 用 属性 
0 人 target 来 获取 要 重新 变 模 糊 的 图 像 。 获 得 该 因 

像 元 素 后 ， 使 图 像 重 新 变 模糊 的 代码 与 以 前 相 
name = name + "blur.jpg"; 同 。 


image.src = name; 





编写 好 猿 图 游戏 后 ，Judy 又 编写 了 一 些 代 码 ， 





pp 写 ee 
给 习 在 每 周 团队 例会 中 要 求 大 家 进行 审核 。 
少 宁 她 发 起 了 一 个 小 小 的 竞赛 : 谁 能 第 一 个 正确 地 


指出 这 些 代码 的 功能 ， 就 奖励 谁 一 顿 午餐 。 谁 


将 获胜 昵 ? Jim、Joe、Frank 还 是 你 ? 





<Idoctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Don't resize me, I'm ticklish'</title> 
<script> 
function resize() { 
var element = SO 全 人 
element.innerHTML = element.innerHTML + " that tickles!"; 


事件 处 理 程序 名 为 resize， 只 是 在 ddlplay 人 
SPE 的 段 苹 元 素 中 添加 一 些 文本 。 
</head> 
<body> 


<P id="display"> 
Whatever you do, don t resize this window! I'm warning you! 


</p> 


~ A _ 人 人 关 6 
ipt> je 议 里 要 啊 应 的 是 resize 事 件 ， 因 此 我 们 创建 个 名 为 resize 
<scrip 


的 处 理 程序 ， 并 将 其 赋 给 window 对 象 的 属性 onresize。 

















window.onresize = resize; 
</script> 
</body> Ee 
1> SS _| Don' resize me, I'm tickli. x \_ 7 
</htm 和 CD localhost/~Beth/HFJS/chapter9/resize.html »| 三 
日 i zt 素 中 指 定 resize 事 作 处 Whatever you do, don’t resize this window! I'm warning you! that tickles! that 
我 们 在 网 页 末尾 的 <script> 元 系 


理 程序 。 别 忘 了 s 我 们 希望 仅 当 网 页 加 载 完毕 后 才 that tickles! that tickiles! that tic 


1 that tickles! that tickles! that tickles! that tickles! 


理 1 Cs! i Cs! 1 ! that tickles! that tickles! that tickles! that tickles! 
区 能 过 早 地 指定 resize 事 件 处 that tickles! that tickles! that tickles! that ti i 
运行 这 个 脚本 ， 因 此 不 能 过 早 ; 


程 序 that tickles! that tickles! that tickles! that tickles! that tickles! that tickles! that 
[1] 


用 器 突 O 的 大 / ] 0 将 调 用 事 件 处 理 程 that tickles! that tickles! that tickles! that tickles! that tic 
$ 你 i 商 所 ) J/ 八 12Yy,， , = 
当 你 调 整 ; 、 新 网 内 : 在 id 为 display 的 段 洛 元 that tickles! that tickles! that tickles! that Era 
序 resize。 它 这 样 更 亲  : 


， that tickles! that tickles! that tickles! that tickles! that tickles! that tickles! that 
素 中 添加 新 文本 内 容 that tickles。 


that tickles! that tickles! 
kles! that tickles! that 
! that tickles! that tickles! 
kles! that tickles! that 





你 现在 的 位 置 ， 


427 


练习 答案 


< 二 放 JavaScript 迷 学 游戏 带 


请 利用 你 掌握 的 事件 知识 ， 完 成 这 个 填 字 游戏 。 


hs 
CLITICKUv 
A c U 


国 Nn 
CILITIEINITIX 且 二 O87lElcIT 
十 IHIITIRID | 
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对 咏 数 了 如 指 掌 后 ,我们 
过 上 了 富裕 的 生活 ， 天 天 在 乡 
村 俱乐部 里 泡 着 。 











负数 让 你 的 脑子 进 水 了 吧 。 
咱们 不 过 是 在 一 片 空 地 中 央 ， 
我 是 你 的 邻 届 ， 闪 是 一 身 服 务 
生 的 打扮 而 已 。 







名 ~ 
ps » 
.6 


‘ 
» 大 和 

» 四 
Pe 


» 
so 站 
人 


熟知 函数 你 就 能 成 为 明星 。 无 论 在 什么 行业 和 学 科 ， 都 存在 让 大 师 有 别 

芸芸 众生 的 重要 分 水 岭 ， 就 JavaScript 而 言 ， 这 个 分 水 岭 就 是 熟知 函数 。 在 
JavaScript 中 ， 函 数 不 可 或 缺 ， 很 多 设计 和 组 织 代码 的 技巧 都 要 求 你 精通 并 熟练 
地 使 用 函数 。 通 往 精通 函数 的 学 习 道路 很 有 趣 ， 但 常常 会 让 人 迷惑 不 解 ， 因 此 你 
一 定 要 有 心理 准备 。 本 章 将 更 深入 地 介绍 JavaScript 函 数 ， 你 将 像 刘 姥 姥 进 了 大 观 


园 ， 见 到 一 些 奇 寞 、 古 怪 而 神奇 的 东西 。 


数 表 达 式 简介 


关键 他 function 和 神秘 的 双 面 人 全 


到 目前 为 止 ， 我 们 都 像 下 和 面 这 样 声 明 函 数 : 


国 
WH 米 


一 个 标准 的 函数 声明 ， 由 关 
function quack(num) { 键 字 function.、 函数 名 、 形 
for (var i = 0; i < num; i++) { 参 和 代码 块 组 成 。 


console.log("Quack!"); 


我 们 可 以 这 样 调用 这 个 函数 : 在 函数 


quack (3); 名 后 加 上 用 圆 括 号 括 起 的 实 参 。 





这 里 没有 什么 令 人 惊讶 的 地 方 ， 下 面 来 详细 阐述 相关 的 术语 : 上 述 
第 一 条 语句 是 一 个 函数 声明 ， 它 创建 一 个 函数 。 这 个 函数 的 名 称 为 
quack， 可 用 于 引用 和 调用 这 个 国 数 。 


然而 ， 正 如 你 在 上 一 章 末 尾 看 到 的 ， 关 键 字 function 还 有 另 一 种 
用 法 ， 这 让 情况 变 得 扑朔迷离 : 
看 起 来 不 那么 标准 : 这 个 函数 设 有 名 称 ， 而 且 
位 于 一 条 赋值 语句 右边 ， 被 赋 给 一 个 变量 。 
var fly = function(num) { 
for (var i = 0; i < num; i++) { 


console.log("Flying!"); 


编码 技巧 





我 们 也 可 以 调用 这 个 通 数 ， 但 






必须 使 用 变量 fly 来 调用 。 
必须 使 用 变量 多 顾名思义 ,函数 引用 是 指向 函 
£1y (3); 数 的 引用 。 你 可 以 使 用 函数 引 





用 米 调 用 函数 ， 还 可 以 将 它们 赋 给 变量 
存储 在 对 象 中 、 传 递 给 函数 或 从 函数 返 
回 它 们 (就 像 对 象 引 用 一 样 )， 






在 语句 (如 赋值 语句 ) 中 以 这 样 的 方式 使 用 关键 字 function 
时 ,创建 的 是 函数 表达 式 。 请 注 章 ， 不 同 于 函数 声明 ， 上 述 
函数 没有 名 称 。 男 外 ， 该 表达 式 的 结 末 是 一 个 值 ， 这 个 值 被 
赋 给 变量 fly。 这 是 一 个 什么 样 的 值 呢 ? 我 们 将 它 赋 给 变量 


fly， 然 后 调用 了 它 ， 因 此 它 肯 定 古 一 个 指 占 函数 的 引用 。 
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印 数 声明 和 配 数 表达 式 


得 至 





无 论 你 使 用 函数 声明 还 是 函数 表达 式 ， 


| 的 都 是 国 数 。 那 么 它们 的 区 别 何在 呢 ? 仅仅 是 图 


数 声 明 更 方便 ， 还 是 函数 表达 式 有 些 独特 之 处 使 其 很 有 用 ?抑或 它们 只 是 两 种 做 相同 事情 的 


不 同方 式 而 已 ? 
乍 一 看 ， 国 数 声明 和 国 数 表 达 式 差别 不 大 ， 





但 实际 上 它们 存在 根本 性 差别 。 要 明白 这 种 差别 ， 





首先 需要 研究 一 下 州 览 絮 在 运行 阶段 如 何 处 理 代码 。 下 面 就 来 看 看 放 览 融 如 何 分 析 并 执行 网 页 


中 的 代码 。 






太 好 了。 这 个 网 页 
含 一 些 需 要 处 理 的 代码 。 














站 localhost/~Beth/HFJS/chapt... | »| 三 














找 芳 数 声明 。 


Var migrating = true， 








var fly = function (num) { 


for (var i = 0; i < num: 





0 句 中 ， 有 一 个 console.log("Flying!"); 
团 数 表达 式 。 这 不 是 函数 启 
明 ， 因此 继续 往 下 查找 。 
function quack(num) 1 
这 是 一 个 荡 数 声明 ， > for (var i = 0; i < ; 
要 对 其 进行 处 理 (请 参 " 7 
ny Sonsole.log("Quack!"); 
if (migrating) { 
quack (4); 
处 理 完 上 述 函 数 声 明 后 ， 我 们 依然 忽 一 了 £1y(4); 
略 这 些 代码 ， 因 为 其 中 设 有 包含 任何 
鸭 数 声明 。 


你 现在 的 位 置 ， 


o 这 是 变量 声明 ， 而 不 是 函数 声明 ， 因 
a 我 总 是 首先 扫描 代码 ， 此 我 暂时 忽略 它 ， 继 续 往 下 查找 。 


在 其 中 查 


i++) 






i++) 
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如 何 分 析 函 数 声明 


分 析 镶 数 声明 
览 器 查找 函数 声明 。 找 到 


在 分 析 网 页 期 间 (执行 任何 代码 之 前 ) ， 训 
国 数 声 明 时 ， 剖 览 合 创建 相应 的 国 数 ， 并 将 得 到 的 国 数 引用 赋 给 与 国 


数 同名 的 变量 ， 如 下 所 示 。 









Var mi r 。 


Va 二 
r fly = function (num,) { 





fo i 
r (var i = 0; i < num; i++) { | 
| Console. log("Flying! ") 





了 






}; 










function quack (num) { 





for (v Ce 
0 i++) 1 







这 是 代码 中 的 函数 声 一 > 
明 ， 来 看 看 浏览 器 如 
何 处 理 它 。 





Te 这 


} 








我 们 过 到 3 一 个 喇 数 声明 ， 
必须 先 对 其 进行 处 理 ， 再 做 
其 他 的 事情 。 






} 









if (migrating) { 
quack (4); 
fly(4); 







9 
0 我 将 这 个 号 数 存储 起 来 ， 以 便 能 够 


了 


在 人 它 被 油 用 时 获取 人 饭 。 





| 所 
eoo0o Sy 


所 CGC 省 | [localhost/~Beth/HFJS/chapt... 


一 
»| = 
= 











function quack (num) { 
Bora = 0 < mom, el 


console.1log( “Quack!” ); 






”3 _ 


function quack(num) { 
for (var i = 0; i < num; I++) { 


console.log("Quack!"); 






} 









将 函数 存储 在 这 里 ， 
以 便 函 数 被 调用 时 能 
够 使 用 它 。 










入 个 芒 数 名 为 quack， 因 
此 创建 一 个 名 为 quack 的 
变量 来 存储 指向 这 个 鸟 数 
的 引用 。 









Co 









@ 


sao NN 


所 CGC 省 | [DD localhost/~Beth/HFJS/chapt... | »| 
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py 4 I /Am » 
接 下 来 呢 ? 浏览 器 执行 代码 
处 理 所 有 的 国 数 声明 后 ， 神 览 器 回 到 代码 开头 ， 开 始 按 从 头 到 尾 的 顺序 
执行 代码 。 我 们 来 看 看 浏览 器 是 如 何 做 的 。 

















-一 代码 开头 是 一 条 简单 的 变 
量 赋 值 语句 。 本 书 前 面 介 
绍 过 浏览 器 如 何 处 理 这 种 
语句 。 


var migrating = true; 


var fly = function(num) { 





for (var i = 0; i < num; i++) { 










console.log("Flying!"); 






我 得 创建 一 个 名 
为 migrating 的 变 
量 ， 放 将 其 初始 值 

设置 为 true。 










接 下 来 ， 我 遇 到 了 另 
一 个 变量 fly。 我 来 创 


建 这 个 变量 。 


function quack(num) { 





for (var i = 0; i < num; 






console.log("Quack!"); 


A if (migrating) { 






wd 


所 CG 少 | 站 Ilocalhost/~Beth/HFJS/chapt » 


quack (4); 
fly (4); 









在 这 条 语句 的 右边 ， 
是 一 个 喇 数 表达 式 。 我 将 这 个 隔 数 

存储 起 来 ， 以 便 能 够 在 其 被 油 用 时 获 
取 人 饭 。 












{ 
for (a = O07 0 rr, sy | 
Gonsele. Lo (elyine 


Function (num) 











人 由 于 和 这 是 一 企 络 数 表达 式 ， 
我 需要 创建 一 个 指向 这 个 新 鲜 数 
的 中 膨 。 


并 
@og | | Planets x We [34 有 


和 CQ 省 |， [5 localhost/~Beth/HFJS/chapt.. | ”| 三 


} 

















现在 ， 我 只 需 将 这 个 
号 数 引 用 贼 给 变量 fly 
即 可 。 
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调用 函数 


组 统 往 下 执行 ee 


完 变 


内 行 。 
| 下 人 执行 
训 览 右 跳 过 声明 ， 接 着 执行 后 面 的 条 件 语 名 


看 看 训 览 从 征 如 何 做 的 。 


Var migrating = true， 






var fly = function (num) { 








for (i=0;i<n 


Var migratina = rue; 
console.log("F g g true 









var fly = function (num) { 


for (i = 0; i < num; i++) 1 






Console. log("Flying! TI) 
} 










}; 





Console.log("Q 












function quack(num) { 
} 








for (i = 0; i < num; i++) 1 





Console. log ("Quack! Ds 
if (migrating) { } 
quack (4); 


fly (4); 









} 









quack (4) ; 





if (migrating) 1 
quack (4); 
fly (4); 


变量 migrating 为 true,， 央 
此 需要 执行 jf 语句 的 代码 块 。 
TE 
数 quack。 WG 
调用 呢 ? 因为 这 里 使 用 了 苹 数 名 
quack， 朋 人 它 后 面 跟着 加 括号 。 























别 忘 7 ，quack 变 是 是 一 个 引 岂 ， 


指 自我 之 前 存储 的 唔 数 。 


这 是 根据 区 函数 quack 的 东 函数 声明 pe 
创建 的 函数 。 一 









| DD localhost/~Beth/HFJS/chapt »| 三 




















在 这 个 西数 调 周 中 ， 
一 个 实 参 ， 因 此 我 将 这 
传递 给 函数 …… 






he ele 
4 -3 和 全” 的 副本 传递 给 形 妥 .. 


function quack(num) { 


i = 0; i < num; i++) { 
@ AQ [mh planets ” 全 for (var i 一 0; 工 


| ec 会 | localhost/~Beth/HFJS/chapt... | »| 三 Console. log("Quack! ") 7 \ 


















这 些 代 码 在 





再 执行 镍 数 体 中 的 代码 ， 
控制 名 中 打印 Quackl 四 次 。 
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函数 是 一 等 公民 


Var migrating = true. 
4 










Var fly = function (num) { 






f [DD i [DD | 
or (var i = 0; i < num; i++) { | 





结束 


Console. log("Flying! "); 











} 








余下 的 全 部 工作 是 调用 根据 函数 表达 式 创建 的 函数 fly。 我 
ys 


们 来 看 看 放 贤 器 是 如 何 处 理 ; 


function quack (num) { 













f [DD i [DD | 
or (var i = 0; i < num; i++) { | 












看， 另 一 个 名 数 调 膨 。 我 怎 
人 双 知 道 这 是 一 个 号 数 调 用 呢 ? 
因为 这 里 使 用 了 变量 名 fly， 而且 后 
面 跟着 园 括 号 。 


Console. log("Quack! "Ts 






fly(4); 


} 










if (migrating) 1 
quack (4). 
fly (4); 








列 忘 了 9 变量 fl1y 是 一 个 引 用 ， 
指向 我 之 前 存储 的 芒 数 。 














这 是 变量 fy 一 > 
指向 的 函数 。 






Eunction(num) { 
ei = 0; i < num; 





console.log("Flying!") 






} 









在 这 个 号 数 调 有 国耻， 
一 个 灾 参 ， 因 此 我 将 这 yy 


入 半 给 鲁 数 …… 
4 一 一 一 为 调用 函数 ， 我 们 将 实 参 本 


ps —™ 副本 传递 给 形 参 .… 


function(num) { 









for (var i = 0; i < num; i++) { 


1 1N。 ~ _ 
A console.log("Flying!"); 盏 执行 函数 体 。 














站 localhost/~Beth/HEJS/chaprt 





得 执行 呜 数 体 中 的 人 代码， 这 些 代 码 在 


控制 名 中 打印 Flying! 四 次 。 
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基于 前 述 浏览 句 处 理 函 数 quack 和 fly 的 代码 的 方式 ， 


尔 能 得 出 哪 


ee 


些 有 关 函 数 声明 和 函数 表达 式 的 结论 呢 ? 请 选择 你 认为 正确 的 所 
有 说 法 。 继 续 往 下 阅读 前 ， 务 必 查 看 本 章 末 尾 的 答案 。 
在 处 理 其 他 代码 之 前 ， 先 处 理 函 数 声 J ”函数 声明 是 完整 的 语句 ， 而 函数 表达 
明 。 起 只 是 语 可 的 和 部 分 
函数 表达 式 随 其 他 代码 一 起 被 处 理 。 J eile 
类 已 AN 二 AN 
是 创建 一 个 与 函 ? 0 并 将 
指 问 函数 的 引用 赋 给 它 。 函数 声明 是 一 种 屡试不爽 的 函数 创建 
函数 表达 式 返 回 一 个 引用 ， 该 引用 指 万 式 。 
加 函数 表达 式 创建 的 浮 数 。 J ”应 尽 可 能 使 用 函数 声明 ， 因 为 它们 首 
rh 
了 可 在 变量 中 存储 指向 函数 的 引用 。 先 被 处 理 。 
世上 滩 有 
帅 项 的 问题 
》 四 FP 
[9) ; 我 们 见 过 像 3+4 和 Math .ran- [9) ; 让 变量 指向 一 个 函数 能 带 来 什 只 ”。 根 本 不 是 这 样 的 。 浮 数 表 达 式 
dom() * 6 等 这 样 的 表达 式 ， 但 函数 。” 么 好 处 ? 和 其 他 表达 式 一 样 ， 可 出 现在 很 多 不 
怎么 可 能 是 表达 式 呢 ? Ap ， 同 的 地 方 。 这 个 问题 问 得 很 好 ， 稍 后 
Kee ， 喉 一 个 好 处 是 ， 你 可 以 使 用 它 来 ”将 详细 讨论 ， 敲 请 期 待 ， 
只 ”结果 为 一 个 值 的 任何 东西 部 ”调用 相应 的 函数 ， 
过 对 达 广 ，、34 的 续 当 为了， Math. myFunctionReference(); 9 ; 变量 可 存 
random() * 6 的 结果 是 一 个 随机 数 ， 而 这 种 变量 指向 的 是 什么 呢 ? 仅仅 是 


函数 表达 式 的 结果 是 一 个 函数 引用 。 
2 
9): 


号 ”， 夯 数 声 明 是 一 条 语 身 。 可 以 认 

为 它 包含 一 条 隐藏 的 赋值 语 身 ， 这 条 

语 向 将 函数 引用 赋 给 一 个 变量 。 函 数 

表达 式 不 自动 将 示 数 引用 赋 给 任何 
， 你 必须 显 式 地 这 样 做 。 


函数 声明 为 何不 是 表达 式 呢 ? 


另外 ， 还 可 以 将 函数 引用 传递 给 函数 


或 从 函数 返回 函数 引用 ， 这 将 在 稍 后 
几 页 介绍 。 


介绍 


|9) ;未 数 表 


名 右边 吗 ? 


达 式 只 能 出 现在 赋值 语 


数 体 中 的 代码 吗 ? 


AAA ，。 

吟 ' ， 这 是 一 种 看 待 画 数 的 不 错 方式 ， 
但 你 可 以 更 进一步 ， 将 函数 视 为 经 过 
简单 包装 的 代码 ， 可 随时 调用 。 ee 
章 后 面 你 将 看 到 ， 这 种 经 过 简单 包 
WE 
仅 是 函数 体 的 代码 。 






我 们 刚才 看 到 了 ， 
建 的 铅 数 ， 调 周 方 式 完全 相同 。 贸 数 声明 和 印 数 表 
nl 自己 好 像 遗 泼 了 一 些 





对 于 芒 数 声明 入 数 表 达 式 创 







细微 的 差别 。 






存在 细微 的 差别 。 首 先 ， 你 说 的 没 错 ， 无 论 是 使 用 





国 数 声 明 还 息 国 数 表达 式 ， 了 节 终 都 将 得 到 一 个 国 数 。 


但 它们 之 间 存 在 一 些 重要 的 差别 。 一 个 差别 是 ， 使 用 
函数 声明 上 时， 函数 将 在 执行 代码 前 创建 ， 而 使 用 函数 
表达 式 上 时， 函数 将 在 运行 阶段 执行 代码 时 创建 。 

男 一 个 差别 与 函数 命名 相关 : 使 用 函数 声明 时 ， 将 创 


建 一 个 与 国 数 同名 的 变量 ， 并 让 它 指 回国 数 ， 而 使 用 
冰 数 表达 式 时 ， 通 第 不 给 函数 指定 名 称 ， 因 此 你 要 么 








在 代码 中 将 函数 赋 给 一 个 变量 ， 0 


国 数 表达 却 。 


请 将 这 些 差 别 牢记 在 心 ， 稍 后 这 些 差别 的 重要 性 将 显 
现 出 来 。 就 目前 而 言 ， 你 只 需 记 住 函数 再 明和 函数 表 
达 式 的 处 理 方 式 以 及 函数 名 是 如 何 处 理 的 即 可 。 





你 现在 的 位 置 ， 
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函数 声明 和 表达 式 的 练习 








变 身 浏 览 器 


下 面 是 一 些 JavaScript 代 码 。 


处 理 这 些 代 码 : 第 一 
式 。 

Var midi = true; 

var type = "piano"; 


var midiInterface; 


function play(sequence) { 
/ 函数 体 的 代码 

} 

Var pause = function() {{ 
stop(); 

} 

function stop() { 


/ 函数 体 的 代码 


function CeateMiadi() { 


/ 函数 体 的 代码 


} 
if (midi) { 
midiInterface = function(type) 
/ 函数 体 的 代码 
}; 
} 


兆 处 理 印 数 声明 ， 第 二 


[ 


你 的 任务 是 像 浏览 器 嘟 样 执行 它们 ， 和 并 
在 每 个 印 数 被 创建 时 ， 在 右边 将 其 


记录 下 来 。 列 总 了 分 两 饥 
注 处 理 咏 数 表 达 


请 按 顺 序列 出 所 创建 了 
数 表 达 式 创建 的 函数 ， 列 出 它 被 赋 给 的 变 
名 称 。 我 们 已 经 写 出 了 创建 的 第 一 个 函数 


play 


函数 的 名 称 。 对 于 根据 迎 


量 的 


* 昌 

号 数 怎 么 也 是 什 呢 

确实 ， 我 们 都 将 函数 视 为 调用 的 东西 ， 但 也 可 将 函数 视 为 值 。 这 个 值 实 
际 上 是 指向 函数 的 引用 。 正 如 你 看 到 的 ， 无 论 是 使 用 函数 声明 还 是 函数 
表达 趟 来 定义 函数 ， 得 到 的 都 是 指向 这 个 函数 的 引用 





function(num) 1 





变量 可 存储 指向 逊 WS 
数 的 引用 。 实际 的 函数 
在 这 蛙 。 

对 于 函数 ， 可 执行 的 最 简单 的 操作 之 一 是 将 其 赋 给 变量 ， 如 下 所 示 : 
广 里 再 次 列 出 了 前 面 的 两 个 葬 黎 。 I 
是 合 用印 丈 声 明定 义 的 ， 而 他 关 人 | 用 ， 而 这 此 
0 定义 的 。 议 些 做 法 得 到 的 都 下 中 
or (var i = 0; i num; i++) { 引用 分 别 存储 在 变量 quack yo 

console.log("Quack!"); 


function quack(num) { 


} SS 
} 逊 数 声明 目 动 将 引用 赋 给 与 函 
var fly = function(num) { 数 同名 的 变量 ， 这 里 是 quack。 
for (var i = 0; i < num; I++) { 


le.l "Flying!"); 
i 显 式 地 将 得 到 的 引用 赋 


8 给 一 个 变量 。 这 里 将 引用 存储 到 了 变量 fly 中 。 


将 fly 赋 给 变量 superFly 后 ，superFly 存 储 了 相 
var superFly 三 fly; < 一 一 应 的 函数 引 用 ， 因此 可 在 这 个 变量 后 面 加 上 
< 一 一 圆 括 号 和 实 参 来 调用 相应 的 函数 | 








superFly (2); 
JavaScript 控 制 台 
人 全、 虽然 quack 是 由 函数 声明 创建 的 ， 但 它 存 9 
四 ， 但 它 存 储 
var superQuack = quack; 的 也 是 一 个 函数 引用 ， 因 此 可 以 将 它 赋 给 Flying! 
superQuack (3); 变量 superQuack， 进 而 通过 这 个 变量 来 调 uae 


用 相应 的 函数 。 ouackl 


换 句 话说 ， 引 用 就 是 引用 ， 不 管 是 以 什么 方式 Quack! 
创建 的 (使 用 函数 声明 或 者 函数 表达 式 创建 ) | 
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函数 值 的 练习 


py 
SR 麻 笔 上阵 
为 牢 牢 地 记 住 函数 是 值 的 概念 ， 咱 们 来 玩 一 个 碰 运 气 取胜 的 游戏 。 请 党 试 下 面 


这 个 猜 豆子 游戏 ， 你 会 赢 还 是 输 呢 ? 请 试 一 试 ， 并 找 出 结果 。 





var winner = function() { alLezt("WINNERI!I'") }; 和 _、 别 所 了 ， 这 些 变 鳃 分 别 存储 了 指 
var loser = function() { alert("LOSER!") }; ede 我 

ee 门 可 以 像 其 他 任何 值 一 样 ， 将 这 
// 明 们 来 名 站 号 些 引用 赋 给 其 他 变量 。 
winner(); 


// 将 函数 引用 赋 给 其 他 变量 


Var a = WInneL:， 


人 别 忘 了 ， 随 时 都 可 以 


stem 调用 指向 函数 的 引用 。 
var C = loser; 

a(); 

b(); 

// 来 玩 一 个 猪 豆 子 游戏 ， 看 看 你 的 运气 怎样 

C = ai 

a = Db， 《- -手动 执行 这 些 代 码 ， 
po 看 看 你 会 赢 还 是 输 。 
c= a; 

a= C; 

a=b; 

b = c 





满 将 岛 数 视 为 值 ， 就 像 数 年 、 年 符 绅 、 布 尔 值 和 对 宵 
一 立 。 相 比 于 上 下 其 他 值 ， 岛 数值 的 不 同 过 处 在 于 
我 们 可 汰 确 用 它 ， 
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起 底 函 数 





Head First: 轴 数 ， 很 高 兴 你 又 来 到 了 我 们 的 证 目 。 
你 韭 党 神秘 ,我们 的 读者 渴望 更 深入 地 了 解 你 。 

国 数 : 确实 ， 我 星 泡 难 懂 。 

Head First. 咱们 先 来 说 说 这 个 概念 吧 ， 你 既 可 以 使 
用 声明 来 创建 ， 也 可 以 使 用 表达 式 来 创建 。 为 何 要 提 
供 两 种 定义 方式 呢 ? 难道 一 种 方式 不 够 吗 ? 





国 数 : 别 记 了， 这 两 种 函数 定义 方式 的 功能 存在 细 
微 的 差别 。 

Head First: 但 结果 都 一 样 ， 束 古 一 个 函数 ， 不 古 
吗 ? 


函数 : 你 说 的 没 错 ， 但 国 数 声明 在 幕后 为 你 做 了 一 
些 工 作 : 它 在 创建 国 数 的 同时 ， 还 创建 了 一 个 用 于 
创建 国 数 引 用 的 变量 。 国 数 表 达 式 也 创建 国 数 ， 结 采 
为 一 个 引用 ， 但 如 何 使 用 它 由 你 决定 。 


Head First: 无 论 在 哪 种 何 情 况 下 ， 我 们 不 古都 将 孙 
数 表 达 式 创建 的 引用 存储 到 变量 中 吗 ? 


函数 : 绝对 不 是 。 事 实 上 ， 我 们 通常 不 这 样 做 。 别 
所 了 ， 国 数 引 用 是 一 个 值 。 想 想 吧 ， 对 于 其 他 类 型 的 
值 ， 如 对 象 引 用 ， 你 都 能 做 哪些 事情 呢 ?” 对 于 函数 引 
用 ， 也 可 以 做 这 些 事 情 。 


Head First: 这 怎么 可 能 呢 ? 我 声明 图 数 、 调 用 团 
数 ， 这 些 差 不 多 就 是 语言 允许 我 对 函数 做 的 所 有 事 


情 ， 不 征 吗 ? 


函数 : 大 错 特 错 。 你 需要 将 函数 视 为 值 ， 就 像 对 象 
和 基本 类 型 值 一 样 。 获 得 图 数 后 ， 你 就 可 以 对 它 做 各 
种 事情 了 。 不 过 ， 国 数 和 其 他 类 型 的 值 乙 则 存 在 一 个 
重要 差别 : 可 以 调用 函数 来 执行 函数 体 门 的 代码 。 正 
是 这 一 扩 让 函数 与 众 不 同 。 

















本 周 访 谈 : 理解 函数 


Head First: 这 听 起 来 了 不 得 ， 但 除了 定义 和 调用 
外 ， 我 不 知道 还 能 对 国 数 做 什么 。 


图 数 : 这 就 是 年 收入 达 六 位 数 的 程序 员 和 脚本 编写 
人 员 的 区 别 。 能 够 像 其 他 值 一 样 看 待 国 数 后 ， 便 能 使 
用 各 种 有 趣 的 编程 结构 。 


Head First: 你 能 举例 说 明 吗 ”一 个 就 可 以 。 


函数 : 没 问 题 。 假 设 你 要 编写 一 个 排序 函数 。 为 
此 ， 可 让 它 接 受 两 个 参数 : 一 个 需要 排序 的 集合 : 
一 个 知道 如 何 对 集合 中 的 任意 两 个 条 目 进行 比较 的 函 
数 。 使 用 JavaScript， 你 可 轻而易举 地 编写 这 样 的 代 
码 。 编 写 一 个 可 用 于 对 各 种 集合 进行 排序 的 函数 ， 并 
器 它 传 递 一 个 知道 如 何 进 行 比较 的 商 数 ， 让 它 比 较 集 
合 中 的 条 目 。 

Head First: 哦 …… 


函数 : 我 说 过 ， 这 就 是 年 收入 达 六 位 数 的 程序 员 和 
脚本 编写 人 员 的 区 别 。 再 说 一 壳 ， 我 们 将 一 个 知道 
如 何 进 行 比 较 的 函数 传递 给 另 一 个 函数 。 换 句 话 说 ， 
我 们 将 函数 视 为 值 ， 从 而 将 其 作为 值 传递 给 函数 。 


Head First: 除了 让 人 感到 迷惑 外 ， 这 能 市 来 什么 好 
处 ? 


函数 : 好 处 包括 工作 更 轻松 、 代 码 更 少 、 更 可 靠 、 
更 灵活 、 更 易于 维护 ， 还 有 更 高 的 新 水 。 


Head First: 听 起 来 很 不 错 ， 但 我 不 知道 怎么 得 到 这 
些 好 处 。 


函数 : 要 得 到 这 些 好 处 ， 你 需要 做 些 工 作 。 这 绝对 
是 需要 你 扩展 思路 的 地 方 。 


Head First. 函数 ， 我 的 脑袋 已 经 很 乱 ， 都 快要 爆炸 
了 。 我 得 去 躺 一 会 儿 。 
函数 : 请 便 。 谢 谢 你 的 采访 | 
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我 们 提 到 过 防 数 在 JavaScript 
日 4 知 

中 是 一 季 公 民风 

如 采 你 学 习 JavaScript 六 使 用 的 是 传统 的 编程 语言 ， 你 可 能 认为 国 数 束 是 国 

数 ， 可 以 声明 和 调用 它们 ， 仅 此 而 已 。 

你 现在 知道 ， 在 JavaScript 中 ， 国 数 是 值 ， 是 可 赋 给 变量 的 值 。 你 还 知道 ， 

对 于 其 他 类 型 的 值 ， 如 数字 、 布 尔 值 、 字 符 串 和 对 象 ， 可 对 其 做 各 种 事情 。 

例如 将 它们 传递 给 图 数 ， 从 图 数 返 回 它 们 ， 甚 至 将 它们 存储 在 对 象 或 数组 

中 。 

实际 上 ， 对 于 这 些 类 型 的 值 ， 计 算 机 科学 家 使 用 了 一 个 术语 一 一 一 等 值 。 对 

于 一 等 值 ， 你 可 以 做 如 下 事情 。 























将 其 赋 给 变量 或 存储 在 数组 和 对 象 等 数据 结构 中 。 











你 猜 怎么 着 ”对 于 函数 ， 也 可 以 做 上 述 所 有 事情 。 事 实 上 ,在 | 

JavaScript 中 ， 对 其 他 值 可 以 做 的 事情 ， 也 都 可 以 对 函数 做 。 六 
此 ， 在 JavaScript 中 ， 国 数 与 你 知道 的 各 种 值 (数字 、 字 符 串 、 
布尔 值 和 对 象 ) 一 样 ， 也 是 一 等 值 。 


下 面 以 更 正规 的 方式 定义 了 一 等 值 。 





一 等 值 ， 在 编程 语言 中 ， 可 像 对 待 其 他 任何 值 一 
样 对 待 的 值 ， 包 括 赋 给 变量 、 作 为 实 参 传递 给 图 
数 以 及 从 函数 中 返回 。 









你 将 看 到 ，JavaScript 函 数 完全 具备 一 等 值 所 需 的 资质 。 接 下 
来 咱们 花 点 时 间 看 看 在 上 述 各 种 情况 下 ， 函 数 作为 一 等 值 到 


We \ 站 > 
NE ‘py SS 
» 一 A 

i 


底 意 味 着 什么 。 在 此 之 前 ， 先 提 一 个 小 小 的 建议 : 不 要 再 认 pe 
为 函数 是 特殊 的 ， 有 别 于 JavaScript 中 的 其 他 值 。 将 国 数 视 为 我 们 始终 认为 ， 称 之 为 “可 进入 
值 可 带 来 很 大 的 好 处 ， 本 章 余 下 的 篇 幅 将 说 明 其 中 的 原因 。 任何 地 方 的 VIP” 更 合适 ， 但 人 家 


不 接受 这 个 名 字 ， 所 以 我 们 还 是 
采用 一 等 的 说 法 吧 。 
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内 案头 得 3 
家 而 的 涯 未” 
条 坐 涛 守明 各 条 人 和 各 总 了 玉 们 ) 
一 一 的 比 乔 比 笑 
下 次 面试 时 若 被 问 及 “是 什么 让 JavaScript 国 数 成 为 一 等 公民 ”， 你 和 帮 





将 地 旋 而 归 。 但 在 庆祝 获 和 a ee mn 
-等 公民 的 认识 都 只 是 纸上谈兵 。 诚 然 ， 你 知道 对 于 作为 一 等 
公民 的 国 数 可 以 做 哪些 事情 。 








六 可 以 将 函数 赋 给 变量 ， 


全 这 一 点 你 已 经 看 到 过 。 
了 可 以 将 函数 传递 给 函数 。 全 这 一 点 即将 介绍 。 
了 可 以 从 函数 返回 函数 。 “这 点 稍 后 介绍 ， 








但 你 知道 如 何以 及 何 时 在 代码 中 使 用 这 些 技 巧 吗 ? 不 用 担心 ， 下 
面 以 癌 函 数 传递 冰 数 为 例 来 说 明 这 一 点 。 我 们 将 从 价 单 的 地 方 着 
竹 。 事 实 上 ， 我 们 将 从 一 个 表示 航班 乘客 的 人 简单 数据 结构 着 手 : 


总 共有 4 名 乘客 (你 可 在 广 
Ee 0 dt 上 一 个 列表 中 话 加 朋友 和 家 人 ) 


CC 
[ 


var passengers = name: "Jane Doloop'", paid: true }, 


WA 每 位 乘客 都 由 一 


name: "Dr. Evel", paid: true }, 和 一 含 属 性 name 和 paid 的 
name: "Sue Property", paid: false }, 人 对 象 表示 。 


Ln 


name: "John Funcall", paid: true } ]; 


] 


属性 paid 是 一 个 布尔 值 ， 乘 容 是 否 已 买 夏 。 
属性 name 为 简单 的 文本 字符 串 。 Fae 表示 乘 窜 是 否 已 买 


By" 


请 想 想 如 何 编 写 代 码 来 完成 这 三 项 任 
务 : 确保 没有 乘客 在 茶 飞 名 单 上 ， 确 
保 乘客 都 已 买 票 ， 打印 乘客 名 单 。 





我 们 的 目标 是 ， 编 写 一 些 代 码 来 检查 这 个 乘客 列表 ， 人 确保 满足 
特定 条 件 后 才 允 许 航 班 起 飞 。 例 如 ， 确 保 没 有 乘客 在 禁 飞 名 单 
上 确保 所 有 乘客 都 已 买 票 。 我 们 还 想 将 航班 的 乘客 名 单打 印 
出 来 。 
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编写 处 理 和 检查 乘客 的 代码 

对 于 上 述 每 项 任务 ， 通 常 做 法 是 各 编写 一 个 相应 的 国 数 : 一 个 检查 禁 飞 名 单 的 
图 数 ， 一 个 检查 乘客 都 已 买 票 的 国 数 以 及 一 个 打印 乘客 名 单 的 图 数 。 但 如 了 果 这 
样 做 ， 你 将 发 现 这 些 函 数 都 大 臻 相同， 如 下 所 示 。 

















function checkPaid(passengers) { 
for (var i = 0; i < passengers.length; i++) { 
If (Ipassengers[i].paid) { 


return false; 


function checkNoFly(passengers) { 







} 


return true; for (var i = 0; i < passengers.length; I++) { 





if (onNoFl]lyList(passengersl[il.name)) { 


return false; 


1 


return true; 


function printPassengers(passengers) { 
这 两 个 函数 唯一 的 差别 在 于 ， 
一 个 检查 乘客 是 人 否 已 头 昧 ， 
而 另 一 个 检查 乘客 是 否 在 茶 
飞 名 单 上 。 


print 也 遍历 所 有 的 乘客 。 相 比 于 其 他 两 个 函数 ， 它 0 
唯一 的 不 同 之 处 在 于 ， 不 检查 乘客 ， 而 是 将 其 传递 
给 console.log; 另外 ， 我 们 不 关心 这 个 函数 的 返回 值 。 


for (var i = 0; i < passengers.length; I++) { 
console.log(passengers[i].name); 


return false; 


有 很 多 代码 是 重复 的 : 这 些 国 数 都 过 历 所 有 的 乘客 ， 并 对 每 位 乘客 进行 处 理 。 如 
东 以 后 需要 做 其 他 的 检查 ， 结 末 将 如 何 呢 ? 如 采 要 检查 乘客 征 否 天 团 了 笔记 本 电 
脑 、 是 人 否 要 从 经 济 舱 调 到 头等 舱 、 是 否 映 体 有 巷 寺 呢 ” 这 将 编写 大 量 重复 的 代码 。 
更 糟糕 的 是 ， 如 采 将 存储 乘客 的 数据 结构 从 简单 的 对 象 数 组 改 成 了 其 他 东西 呢 ? 
在 这 种 情况 下 ， 可 能 必须 重新 编写 每 个 畏 数 。 这 不 太 好 。 

鉴于 函数 是 一 等 公民 ， 这 个 小 问题 很 容易 解决 。 解 决 方法 如 下 : 编写 一 个 知道 如 
何人 遍历 乘客 的 函数 ， 并 向 它 传 递 一 个 知道 如 何 执 行 检查 的 函数 ( 即 检查 乘客 是 否 
在 禁 飞 名 单 上 、 检 查 乘客 是 否 已 闫 票 等 ) 。 


























下 面 来 做 一 些 准备 工作 : 编写 两 个 函数 。 第 一 个 函数 将 一 名 乘客 作为 参数 ， 检 查 他 
是 否 在 禁 飞 名 单 上 ; 如 果 在 ， 就 返回 true， 否 则 返回 false。 第 二 个 函数 也 将 一 名 
乘客 作为 参数 ， 检 查 他 是 否 已 买 票 ， 如 果 已 买 票 ， 就 返回 true， 人 否则 返回 false。 
我 们 编写 好 了 这 些 函 数 的 函数 头 ， 你 只 需 编写 它们 的 代码 即 可 。 和 答案 见 下 一 页 ， 可 
别 偷 看 哦 | 





function checkNoFlyList(passenger) { 


function checkNotPaid(passenger) { 


提示 : 假设 楚 飞 名 单 上 只 有 一 个 人 ， 
} 他 就 是 Evel 博 士 。 


SR 磨 笔 上 阵 





下 面 来 热 热 身 ， 尝 试 将 一 个 函数 传递 给 为 一 个 函数 。 请 在 心中 执行 下 面 
的 代码 ， 看 看 它们 的 结果 是 什么 。 继 续 往 下 阅读 前 ， 务 必 碍 看 本 章 末 


尾 的 答案 。 


function sayIt(translator) { 
Var phrase = translator("Hello"); 
alert(phrase); 


function hawaiianTranslator(word) 1 
If (word === "Hello") return "Aloha"; 


if (word === "Goodbye") return "Aloha"; 


sayIt (hawaiianTranslator); 
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迁 代 所 有 的 乘客 


我 们 需要 编写 一 个 国 数 ， 它 将 所 有 乘客 作为 参数 ， 还 将 妃 一 个 知道 如 
何 判断 乘客 征 否 满足 特定 条 件 (如 是 否 在 禁 飞 名 单 上 ) 的 函数 作为 参 





第 二 个 形 参 是 一 个 知道 


沈 米 太 人 人 四 
ee itd dn 如 何 判断 乘客 是 否 满足 
ee 人 3 


function processPassengers(passengers, testFunction) { 


for (var i = 0; i < passengers.length; i++) { 


if (testFunction(passengers[i])) { KK 以 每 次 一 位 的 方式 
迭代 所 有 的 乘客 。 


return false:; 


} | 对 于 每 位 乘客 ， 都 
调用 传 入 的 函数 。 


} 
return true; \ 
} 如 果 这 个 函数 返回 的 结果 为 true， 就 返回 false， 换 
< 志 丰 籽 守业 客 玉 通过 测试 《例如 ， 还 没有 买 和 
弥 名 值 玫 飞 名 单 上 ) ， 就 不 允许 前 
如 果 执 行 到 了 这 里 ， 就 说 明 所 有 乘客 Wes 


都 通过 了 测试 ， 因 此 返回 true。 





现在 ， 只 需 编 写 一些 检 查 乘 客 的 国 数 就 大 功 告 成 了 。 所 垃 的 是 ， 你 在 
前 面 的 “ 磨 笔 上 阵 ” 练 习 中 编写 了 这 些 函 数 ， 如 下 所 示 : 

请 注意 ， 这 是 一 位 乘客 (一 个 对 象 ) 

而 不 是 所 有 乘 容 (一 个 对 象 数组 ) ， 


/一 一 ~ 六 个 卫 数 检查 乘 容 是 否 在 禁 飞 名 单 上 。 


function checkNoFlyList(passenger) { 们 的 禁 飞 名 单 很 简 单 ， 除 Evel 情 士 外 ， 其 他 


二 
return (passenger.name === "Dr. Evel"); 人 都 可 乘坐 0 果 乘 容 为 Evel 情 士 ， #0 
true， 和 否则 返 加 false ( 即 乘 客 不 在 未 


单 上 ) 。 


function checkNotPaid(passenger) { 
return (Ipassenger.paid); 《一 这 个 函数 检查 乘 容 是 否 已 买 票 。 为 此 ， 只 需 检 查 
乘客 的 属性 paid。 如 果 乘 客 设 买 票 ， 就 返 @true。 


向 芒 数 传递 印 数 


至 此 ， 我 们 编写 了 一 个 将 函数 作为 参数 的 函数 (processPassengers) ， 还 编 
写 了 两 个 可 作为 实 参 传递 给 processPassengqers 的 国 数 (checkNoF1LyList 和 





checkNotPaid) 。 


现在 该 将 它们 整合 起 来 了 。 音 乐 响 起 …… 





加 到 一 个 简单 的 HTML 页 面 中 ， 再 在 浏览 器 中 加 
载 该 页 面 。 


的 是 ist， 因 此 
广 里 传 入 的 是 范 数 checkNoFlyList， 
0 各 检查 每 位 乘客 ， 看 


rocessPassengersj 


向 函数 传递 函 教 很 容易 ， 只 看 他 们 是 否 在 禁 飞 名 单 上 。 


Fa 
mm 
将 函数 名 用 作 实 参 即 可 一 
var allCanFly = processPassengers(passengers, checkNoF]lyList); 
If (IallCanFly) { 


console.log("The plane can't take off: we have a passenger on the no-fly-list."); 


只 要 有 乘 容 在 楚 飞 名 单 上 ， 这 个 函数 就 将 返回 false， 因 此 我 们 将 
在 控制 台中 看 到 这 条 消息 。 


这 里 传 入 的 是 疯 数 checkNotPaid， 
因此 nocessPassengers 将 检查 每 位 
var allPaid = processPassengers(passengers, checkNotPaid); 乘客 ， 看 看 他 们 是 否 买 了 票 。 


if (IallPaid) { 
console.log("The plane can't take off: not everyone has paid."); 


人 只 过 有 乘客 设 买 票 ， 这 个 函数 就 将 返回 false， 因 此 我 
们 将 在 控制 台中 看 到 这 条 消息 。 








一 等 公民 就 是 好 ! 当 
然 我 说 的 是 匣 数 。 


试 冶 航 


为 对 这 些 JavaScript 代 码 进 行 测 试 ， 只 需 将 它们 添 





javaScript 控 制 台 

The plane can't take off: we have a passenger 上 看 起 来 航班 根本 就 不 能 起 飞 ， 
on the no-fly-list. 因为 乘客 有 问题 | 幸亏 进行 了 
The plane can't take off: not everyone has paid. 检查 。 
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天 于 函数 的 问 是 





: 缘 习 - 


函数 头 ， 


又 轮 到 你 了 : 编写 一 个 函数 ， 将 乘客 姓名 以 及 是 否 已 买 票 的 信息 打印 到 控制 合 。 
将 这 个 函数 传递 给 processPassengers， 对 其 进行 测试 。 我 们 编号 了 这 个 函数 的 
你 只 需 编写 其 代码 即 可 。 继 续 往 下 阅读 前 ， 务 必 查 看 本 章 末 尾 的 答案 。 


ZS 


Wm 


function printPassenger(passenger) { 


processPassengers(passengers, printPassenger); 


在 这 里 编写 这 


aa 门 
个 范 数 的 代码 。 


将 这 个 函数 传递 给 
processtFassengers 
时 ， 它 将 打印 乘客 


O 


世上 没有 
晶 敬 的 问题 


人 2) ， 难道 不 能 将 这 些 代码 都 放 在 ProcessPassengers 
中 吗 ? 我 们 可 以 在 一 次 迭代 中 执行 所 有 检查 ， 从 而 一 次 性 
完成 所 有 的 检查 并 打印 乘客 清单 。 这 样 效率 不 是 更 高 吗 ? 


A 

只 ， 如 果 代 码 很 简短 ， 这 样 做 也 许可 行 。 然 而 ， 我 们 筷 
求 的 是 灵活 性 。 如 果 以 后 要 在 既 有 的 函数 中 不 断 地 添加 检 
查 (如 乘客 是 否 都 关闭 了 笔记 本 电脑 ) 或 需求 ， 结 果 将 如 
何 呢 ? 在 这 种 情况 下 ， 前 面 采 用 的 设计 可 降低 修改 或 增添 
的 复杂 性 ， 减 少 在 代码 中 引入 bug 的 可 能 性 。 





| 提 ) ， 向 函数 传递 函数 时 ， 传 递 的 到 底 是 什么 呢 ? 


A 

只 ”。 传递 的 是 指向 函数 的 引用 。 可 将 这 种 引用 视 为 指针 ， 
它 指 向 函数 本 身 的 内 部 表示 。 引 用 本 身 可 存储 在 变量 中 ， 
可 赋 给 变量 ， 还 可 作为 实 参 传递 给 函数 。 另 外 ， 在 函数 引 
用 后 面 加 上 圆 括号 ， 将 调用 相应 的 函数 。 


KC 





选 做 题 (这 涉及 
接 下 来 要 介绍 的 
内 容 ) 


隆 笔 上 阵 


下 面 的 代码 创建 了 一 个 函数 ， 并 将 其 赋 给 变量 fun。 


function Eun(echo) { 
console.log(echo); 


function fun(echo) 9 


}; console. log (echo) 





请 执行 下 面 的 代码 ， 并 将 其 输出 写 在 右边 。 请 先 在 心中 执行 这 些 代码 ， 如 果 


看 不 懂 ， 再 在 计算 机 中 执行 它们 。 


fun("hello"); 

function boo(laFunction) f{ 
aFunction("boo"); 

boo(fun); 

console.log(fun); 

fun(boo); 

var moreFun = fun; 

moreFun("hello again"); 

function echoMaker() { 


return fun; 


Var bigFun = echoMaker(); 
bigFun("Is there an echo?"); 


继续 往 下 阅读 前 ， 务 必 查 看 并 理解 本 章 末 尾 的 答案 ， 这 非 
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更 新 乘客 


从 号 数 退 问 喇 数 
至 此 ， 我 们 演示 了 作为 一 等 公民 的 函数 的 两 个 特征 : 将 函数 赋 给 变 
量 以 及 将 函数 传递 给 函数 ， 但 还 未 演示 如 何 从 函数 返回 函数 。 





[可 以 将 函数 赋 给 变量 ， 
六 可 以 将 函数 传递 给 函 
J 可 以 从 函数 返回 函数 


我 们 来 扩展 航班 示例 ， 探 索 为 何以 及 在 什么 情况 下 要 从 函数 返回 函 
数 。 为 此 ， 我 们 将 给 每 位 乘客 添加 一 个 属性 ticket， 并 根据 乘客 购 
买 的 机 票 类 型 ， 将 这 个 属性 设置 为 coach 或 firstclass。 





数 。 下 面 就 来 这 样 做 。 
Ee 





var passengers = | name: "Jane Doloop", paid: true, ticket: "coach" }, 
name: "Dr. Evel", paid: true, ticket: "firstclass" }， 


name: "Sue Property", paid: false, ticket: "firstclass" }, 


a 


name: "John Funcall'", paid: true, ticket: "coach" } |]; 







洪 加 这 个 属性 后 ， 我 们 将 编写 一 些 代 码 ， 来 处 理 空 乘 人 
员 需 要 做 的 各 种 事情 : 








我 将 根据 机 票 类 型 提供 不 同 的 饮 
料 。 关 等 稻 供 应 葡萄 酒 和 鸡尾酒 ; 
经 济 舱 供应 可 乐 和 开水 。 





这 是 空乘 人 员 需 要 向 乘 


宕 提供 的 所 有 服务。 


Te 


function serveCustomer(passenger) { 


// 让 乘客 点 饮料 人 我 们 首先 从 点 
// 让 乘客 点 餐 饮料 开始 实现 。 


// 清理 垃圾 


你 可 能 知道 ， 相 比 于 经 济 舱 ， 为 头等 舱 提 供 的 服务 通常 有 所 不 同 。 擂 “至 少 在 电影 中 是 


头等 舱 乘 客 可 以 点 鸡尾酒 或 葡萄 酒 ， 而 经 济 舱 可 能 只 供应 可 乐 和 国人 
下 小 
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编写 让 乘客 旧 饮料 的 代码 


你 编写 的 代码 可 能 类 似 于 下 面 这 样 : 
如 果 乘 客 乘 坐 的 是 头等 舱 ， 


function serveCustomer(passenger) { 就 显示 一 个 提示 框 ， 询 问 他 
ee ~ 已 名 ) ~ 
if (passenger.ticket === "firstclass") { 要 唱 前 萄 通 还 是 鸡 尾 通 。 


alert("Would You like a cocktail or wine?"); 
} else { 


alertl("Your choice is cola or water."); 


f ”加 果 乘 客 乘 坐 的 是 经 济 舱 ， 
就 询问 他 要 喝 可 乐 还 是 开水 


// 让 乘客 点 餐 
// 清理 垃圾 
} 


不 错 。 对 于 简单 的 代码 ， 这 样 做 挺 好 : 将 乘客 的 属性 t icket 作 为 参数 ， 并 

根据 乘客 购买 的 机 票 类 型 显示 一 个 提示 框 。 来 看 看 这 种 代码 可 能 存在 的 一 

些 缺 点。 确实， 让 乘客 点 饮料 的 代码 很 简单 ， 但 如 果 问 题 更 复杂 时 ， 函 数 

servecustomez 将 如 何 呢 ? 例如 ， 可 能 需要 为 三 类 乘客 提供 服务 (头等 舱 、 en 
商务 舱 和 经 济 舱 ， 而 且 还 可 能 有 第 4 类 乘客 一 一 豪华 经 济 舱 ) 。 如 果 提 供 的 饮 常 只 供应 麦 台 鸡 屁 酒 
料 种 类 更 复杂 呢 ? 如果 可 选择 的 饮料 随 启程 或 目的 机 场 而 异 呢 ? 


如 采 必 须 处 理 这 些 复杂 的 因素 ， 畏 数 serveCcustomezr 将 变 得 很 大 。 写 除 让 乘 
客 点 饮料 外 ， 还 需 处 理 很 多 与 供应 的 饮料 类 型 相关 的 问题 。 然 而 ， 设 计 函 数 时 
有 一 个 不 错 的 经 验 规 则 ， 那 就 是 只 让 每 个 函数 做 一 件 事 ， 并 把 这 件 事 做 好 。 


请 再 次 阅读 前 面 两 个 段落 列 出 的 潜在 问题 ， 表 想 想 该 如 何 设计 代码 ， 让 serveCustomer 
只 专注 于 做 一 件 事情 ， 同 时 让 我 们 能 够 轻松 地 扩展 饮料 供应 功能 。 
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加 


组 织 代 码 来 检查 乘客 


编写 让 乘客 点 饮料 的 代码 : 另 一 种 方式 


前 面 编 写 的 代码 不 赖 ， 但 正如 你 看 到 的 ， 饮 料 供应 方式 变 得 更 复杂 时 ， 这 些 代码 可 能 
现 问 题 。 下 面 采 用 另 一 种 方式 来 重新 编写 代码 : 将 让 乘客 后 饮料 的 逻辑 放 在 一 个 独立 的 
函数 中 。 这 样 可 将 所 有 相关 的 逻辑 放 在 一 个 地 方 ， 在 需要 修改 这 些 逻 辑 时 ， 只 需要 修改 
这 个 地 方 即 可 : 














我 们 创建 一 个 新 函数 createDrinkOrder， 并 将 一 位 乘客 
传递 给 这 个 函数 。 


function createDrinkOrder(passenger) { < 一 一 我 们 将 在 这 个 函数 中 实现 
if (passenger.ticket === "firstclass") { 让 乘客 点 A 料 的 所 有 训 辑 。 
alert("Would you like a cocktail or wine?"); 
} else { 


下 、 这 样 ， 函 数 dh de 
就 不 再 包含 大 重 让 乘客 
} 饮料 的 远 辑 。 


alert("Your choice is cola or water."); 


现在 回 到 图 数 serveCcustomer， 将 所 有 让 乘客 点 饮料 的 逻辑 都 删除 ， 转 而 调用 这 
个 新 国 数 。 


function serveCustomer(passenger) { 


~ 在 serveCustomer 中 ， 将 让 乘客 
号 饮料 的 远 辑 都 删除 …… 





十 esef 





4 


于 


createDrinkOrder(passenger); 


// 让 乘客 点 餐 ~ 


// 清理 垃圾 和 serveCustomer 的 Passenger 
传递 给 函数 createDrinkOrder。 


< 一 转 而 调用 函 数 createDrinkOrder。 





不 a ee 咏 饮 料 的 逻辑 ， 转 而 调用 一 个 函数 后 ， 代 码 可 读 性 无 疑 要 好 得 
多 。 为 外 ， 通 过 将 让 乘客 挟 饮 料 的 逻辑 邦 放 在 一 个 易于 找到 的 地 方 ， 修 改 起 
ee 然而 ， 别 着 急 对 这 些 代码 进行 测试 ， 我 们 又 发 现 了 一 个 回 题 。 


寺 守 ， 我 们 需要 多 次 供应 饮料 


守 和 等， 我们 刚刚 得 知 ， 在 航班 上 只 供应 一 次 饮料 不 够 。 事 实 上 ， 
航班 空 磁 人 员 提 供 的 服务 更 像 是 下 和 面 这 样 的 : 











别 远 了， 只 供应 一 次 
饮料 ? 这 是 什么 航班 ， 
廉价 航班 吗 ? 
function serveCustomer(passenger) { 
createDrinkOrder(passenger); 
// 让 乘客 点 餐 


我 们 修改 了 函数 z 
createDrinkOrder (passenger); 了 图 数 serveCustomer 的 


代码 ， 以 反映 在 整个 飞行 中 将 多 


createDrinkOrder(passenger); 次 调用 createDrinkOrder 这 一 事实 


// 播放 电影 

createDrinkOrder(passenger); 

// 清理 垃圾 

} 

一 方面 ， 我 们 的 代码 设计 得 很 好 ， 只 需 多 次 调用 createDrink- 
order 妈 可 ; 另 一 方面 ， 每 次 调用 createDrinkOrder 让 乘客 点 饮 
料 时 ， 都 需要 重新 确定 乘客 的 类 型 ， 这 走 不 必要 的 。 
你 可 能 会 说 ， 不 过 是 几 行 代码 而 已 。 确 实 如 此 ， 但 这 只 是 一 个 简单 
示例 。 在 实际 程序 中 ， 如 采 需 要 在 移动 设备 中 与 Web 服 务 通信 ， 以 
检查 机 票 类 型 ， 结 朱 将 如 何 呢 ? 这 将 是 耗 时 而 昂 员 的 。 
不 过 别 担心 ， 作 为 一 等 公民 的 国 数 正 骑 着 昌 马 来 拯救 我 们 。 你 知道 ， 
通过 利用 从 函数 返回 函数 的 功能 ， 可 解决 这 种 问题 。 


(雍和 名 上 隆 
你 认为 下 面 的 代码 是 做 什么 的 ?你 能 通过 几 个 示例 来 说 明 如 何 














使 用 这 个 函数 吗 ? 
function addN(n) { 
Var adder = function(x) { 


return n + XxX; 
ys 


return adder:; 


你 现在 的 位 置 ， 453 


利 膨 作 为 一 守 公 民 的 隔 数 让 条 和 客 扣 饮料 


下 面 来 看 看 在 这 种 情况 下 ， 作 为 一 等 公民 的 函数 将 如 何 提 供 帮 助 。 上 有 具 体 的 计划 如 下 : 对 于 
每 位 乘客 ， 不 多 次 调用 createDrinkOorder， 而 是 只 调用 它 一 次 ， 并 让 它 返 回 一 个 知道 
如 何 让 这 位 乘客 点 饮料 的 国 数 。 这 样 ， 每 当 需 要 让 乘客 点 饮料 时 ， 都 只 需 调用 这 个 国 数 
名 可 。 


下 面 首先 来 重新 定义 createDrinkorder， 使 其 创建 一 个 让 乘客 点 饮料 的 国 数 ， 再 返回 
这 个 函数 ， 供 我 们 在 需要 时 使 用 。 


这 是 函数 createDrinkOrder 的 新 版 本 ， 它 返回 一 














个 知道 如 何 让 乘客 点 饮料 的 函数 。 2 下 来 执行 检查 乘客 机 
亚 爱 类 型 的 条 件 代 码 。 《这 
function createDrinkOrder(passenger) { 和 目光， 创建 一 个 此 代码 只 会 会 执行 一 次 。 ) 
var orderFunction; < 变量 ， 用 于 存储 
过 设 加 的 轴 数 
if (passenger.ticket === "firstclass") { 如 果 乘 容 乘 坐 的 是 头等 秀 
orderFunction = function() { < 一 一 就 创建 一 个 知道 如 何 让 头等 
alert("Would you like a cocktail or wine?"); 舱 乘 客 点 饮料 的 函数 
}; 
} else { 
orderFunction = function() { 否则 ， 就 创建 一 个 知 
alert("Your choice is cola or water."); < 一 一 to 如 人 让 名 济 舱 乘 局 
}> 人 入 料 的 bs 国 数 。 


} 
i 
return orderFunction; 《一 退回 创建 的 函数 





下 面 来 重新 编写 国 数 serveCcustomer。 我 们 首先 调用 createDrinkordet 来 获取 


一 个 知道 如 何 给 乘客 点 饮料 的 国 数 ， 再 反复 调用 这 个 国 数 来 让 乘客 点 饮料 。 
隙 数 createDrinkOrder 现 在 返回 


一 个 函数 ， 我 们 将 这 个 函数 存储 


function serveCustomer(passenger) { 在 亦 量 getDrinkOrderFunction 中。 


var getDrinkOrderFunction = createDrinkOrder(passenger); 
getDrinkOrderFunction(); 
// 让 乘客 点 餐 


getDrinkOrderFunction(); 每 当 需 要 让 乘客 点 饮料 时 ， 我 
getDrinkOrderFunction(); 计 一 们 都 调用 createDrinkOrder 返 加 
// 播放 电影 的 那个 函数 。 
getDrinkOrderFunction(); > 


// 清理 垃圾 
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斌 蕉 白 





咱们 来 测试 一 下 这 些 新 代码 。 为 此 需要 编写 一 个 简单 的 函数 ， 在 其 中 迭代 所 
有 的 乘客 ， 并 对 每 位 乘客 调用 serveCcustomer。 将 这 些 代 码 加 入 HTML 文件 
后 ， 在 肇 览 副 中 加 载 这 个 文件 ， 让 乘客 点 饮料 。 





function servePassengers(passengers) { 


serveCustomer(passengers[i]); 


servePassengers(passengers); < 


当然 ， 我 们 还 需 调用 servePassengers 以 
执行 其 中 的 代码 。 这 将 显示 大 量 的 提示 


K 疏 在 这 里 ， 我 们 只 需 和 迭代 数组 passengers 中 的 


for (var i = 0; i < passengers.length; I++) { 


乘客 ， 并 对 每 位 乘客 调用 serveCustomer。 


The page at localhost says: 


Your choice is cola or Water. 


The page at localhost says: 


Would you like a cocktail or wine7 


Eee 


框 ， 一 定 有 


世上 没有 
晶 知 的 问题 


y 

(5); 调用 createDrinkOrder 了 时， 
我 们 获得 了 一 个 函数 ， 要 让 乘客 点 饮 
料 ， 我 们 必须 调用 这 个 返回 的 函数 。 
我 这 样 理 解 正 确 吗 ? 

A 

> 没 错 。 我 们 首先 调用 create- 
DrinkOrder 来 获得 逊 数 getDrink- 
OrderFunction， 它 知道 如 何 让 乘 
客 点 饮料 。 然 后 ， 每 当 要 让 乘客 点 饮 
料 时 ， 我 们 都 调用 这 个 函数 。 请 注 
六。eEDEIinNnkOrderriunctioniEt 
createDrinkOrder 简 单 得 多 ， 它 只 
是 显示 一 个 提示 框 ， 询 问 腾 客 要 点 哪 
种 饮料 。 


y 

8 
[9) se。 getDrinkOrderFunction 怎 
么 知道 该 显示 哪 种 提示 框 呢 ? 


A 
份 ， 因 为 它 是 我 们 根据 来 客 购 买 的 
机 票 类 型 创建 的 。 再 来 看 一 上 腿 create- 


心理 准备 | 


7 


DrinkOrder， 它 根据 来 客 购买 的 机 对 
类 型 返回 相应 的 函数 : 如 果 是 头等 舱 ， 
创建 的 getDrinkorderEunction 显 
示 的 提示 框 将 询问 来 客 要 喝 头 等 舱 供 
应 的 哪 种 饮料 ; 如 果 是 经 济 舱 ， 创 建 
的 getDrinkOrderFunction 显 示 的 提 
示 框 将 询问 乘客 要 喝 经 济 船 供应 的 哪 
种 饮料 。 通 过 根据 乘客 购买 的 机 票 类 
型 返回 相应 的 函数 ， 使 得 每 次 需要 让 
乘客 点 饮料 时 ， 都 可 轻松 地 调用 简单 、 
快速 的 点 饮料 动 数 。 


> ® 

各] ; 这些 代 码 让 一 位 乘客 点 饮料 
为 其 播放 电影 等 ， 可 空乘 人 员 通 常会 
让 所 有 乘客 点 饮料 、 为 他 们 播放 电影 
等 ， 不 是 吗 ? 

A 和 

稳 ， 我 们 是 在 考验 你 | 你 通过 
了 考验 。 你 说 的 一 点 都 没 错 ， 这 
些 代码 每 次 对 一 位 乘客 调用 函数 
serveCustomer。 在 实际 程序 中 ， 情 况 


完全 不 是 这 样 的 。 这 只 有 是 一 个 演示 复 
杂 主 题 (返回 函数 ) 的 简单 示例 ， 并 
非 十 全 十 美 。 有 既然 你 指出 了 我 们 的 错 
误 ， 就 请 拿 出 一 张 纸 ， 完 成 下 面 的 “ 考 
考 你 的 脑力 ” 吧 。 


Sgr" 


如 果 要 重 写 这 些 代码 ， 让 所 
有 的 乘客 都 点 饮料 、 点 餐 并 
给 他 们 播放 电影 ， 同 时 避免 
没完 没 了 地 根据 乘客 购买 的 
机 票 关 型 来 确定 他 可 以 氮 哪 
些 饮料 和 和 餐 食 ， 你 会 如 何 做 
呢 ? 你 会 使 用 作为 一 等 公民 
的 函数 吗 ? 




















函数 的 练习 





你 的 任务 是 修改 前 面 的 代码 ， 以 支持 第 三 类 乘客 : 彭 华 经 济 舱 乘 客 。 对 于 索 华 
经 济 舱 乘 客 ， 除 了 可 乐 和 开水 外 ， 还 可 以 点 葡萄 酒 。 另 外， 请 实现 支持 下 述 菜 
单 的 getDinnerOrderFunction,。 


头等 舱 : 鸡肉 或 意大利 面 。 
案 华 经 济 舱 : 快餐 或 芝士 拼盘 。 
经 济 舱 : 花生 饼 或 椒盐 脆 饼 。 


~、 


请 务必 查看 本 章 末 尾 的 答案 。 另 外 ， 别 筷 了 对 你 编 与 的 代码 进行 测试 。 


务必 使 用 作为 一 等 公民 的 函数 来 
实现 这 些 功能 | 


Web 镇 可 乐 公司 


Web 镇 可 乐 公 司 需要 有 人 帮忙 管理 其 产品 线 代码 。 为 施 以 
援手 ， 我 们 来 看 看 其 用 来 存储 碳酸 饮料 产品 的 数据 结构 : 














他 们 将 产品 存储 在 一 个 对 象 数组 中 ， 
其 中 每 个 对 象 都 表示 一 款 产 品 。 





var products = [ name: "Grapefruit'", calories: 170, color: "red", sold: 


Co 


]; 


人 让 每 款 产品 中 ， 都 存储 了 产品 名 、 卡 路 
里 数 、 颜 色 以 及 每 月 销售 了 多 少 福 。 












我 们 更 需 有 人 对 这 些 产 品 进行 排序 。 我 们 需要 按 每 
种 属性 对 和 这些 产品 进行 排序 : 名 称 、 卡 路 里 数 、 颜 色 
和 和 销量。 当然 我们 希望 以 尽 可 能 高 的 效率 完成 这 些 
工作 ， 同 时 提供 足够 的 灵活 性 ， 以 便 能 够 以 众多 不 同 
的 方式 进行 排序 。 


Web 镇 可 乐 公司 的 分 析 师 一 、 、 


name: "Orange", calories: 160, color: "orange", sold: 12101 }, 
name: "Cola", calories: 210, color: "caramel", sold: 25412 }, 
name: "Diet Cola", calories: 0, color: "caramel", sold: 43922 }, 
name: "Lemon", calories: 200, color: "clear", sold: 14983 }, 
name: "Raspberry'", calories: 180, color: "pink", sold: 9427 }, 
name: "Root Beer'", calories: 200, color: "caramel", sold: 9909 )}, 


name: "Water", calories: 0, color: "clear", sold: 62123 } 


你 现在 的 位 置 ， 


关于 数组 排序 的 谈话 


Frank: 大 家 好 ， 我 接 到 了 Web 镇 可 乐 公司 的 电话 ， 让 我 
们 帮忙 对 他 们 的 产品 数据 进行 排序 。 他 们 希望 能 够 按 任意 
属性 对 产品 进行 排序 ， 如 名 称 、 销 售 的 瓶 数 、 饮 料 颜色 、 
每 瓶 的 卡路里 数 等 ， 同 时 和 希望 排序 方案 足够 灵活 ， 以 便 
未 来 也 能 够 按 其 他 属性 进行 排序 。 
Joe: 当前 他 们 是 如 何 存储 产品 数据 的 呢 ? 
Frank: 每 款 产 品 都 是 一 个 存储 在 数组 中 的 对 象 ， 包 含 表 
示 名 称 、 销 量 、 卡 路 里 数 等 信息 的 属性 。 
Joe : 明日 。 
Frank: 我 首先 想到 的 是 实现 一 种 简单 的 排序 算法 。Web 午 
可 乐 公司 的 产品 不 多 ， 因 此 要 求 排序 算法 简单。 
oe Jim: 哦 ， 我 想到 了 一 种 更 简单 的 办 法 ， 但 这 要 求 你 具备 作 
Frank 为 一 等 公民 的 函数 的 知识 。 
Frank: 只 要 简单 我 就 喜欢 ! 但 这 与 作为 一 等 公民 的 函数 有 什么 关 
系 呢 ? 听 起 来 好 像 很 复杂 。 
Jim: 一 点 都 不 复杂 。 只 需 编写 一 个 知道 如 何 对 两 个 值 进行 比较 的 函数 ， 再 将 它 传 
递 给 另 一 个 实际 进行 排序 的 函数 即 可 。 
Joe: 这 个 函数 的 工作 原理 到 的 古 什么 样 的 呢 ? 
Jim: 你 不 用 管 排 序 的 问题 ， 只 需 编 写 一 个 知道 如 何 对 两 个 值 进行 比较 的 函数 。 例 
如 ， 假 设 要 根据 销量 这 个 产品 属性 进行 排序 ， 可 这 样 编写 这 个 国 数 : 
function compareSold(productl1, product2) { < 一 这 个 函数 将 两 款 产品 作 
| 为 参数 ， 并 对 它们 进 
// 执行 比较 的 代码 行 比 较 。 
} 
详细 的 代码 细 广 各 后 再 说 。 这 里 的 关键 是 ， 有 了 这 样 的 尔 数 后 ， 你 只 需 将 其 传递 
给 一 个 排序 函数 ， 这 个 排序 函数 将 为 你 完成 其 他 所 有 的 工作 一 一 它 只 要 求 你 让 它 
知道 如 何 对 产品 进行 比较 。 
Frank: 等 等 ,这 样 的 排序 函数 在 哪里 呢 ? 
Jim: 它 实 际 上 古 一 个 可 对 任何 数组 调用 的 方法 。 你 可 以 对 数组 progducts 调 用 
方法 sort， 并 将 上 述 比 较 函 数 传递 给 它 。 这 样 ， 当 方法 sort 执 行 完 毕 后 ， 数 组 
products 便 排 好 序 了 ， 而 排序 标准 就 是 compareSold 使 用 的 排序 标准 。 
Joe: 也 惑 是 说 ， 如 采 要 按 销 量 排序 ， 由 于 销量 都 是 数字 ， 国 数 compareSoldq 只 
需 确定 哪个 值 更 大 或 更 小 即 可 ” 


Jim: 没 错 。 下 面 来 更 深入 地 了 解 一 下 数组 排序 的 工作 原理 。 











Jim 
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数组 方法 sort 的 工作 原理 


JavaScript 数 组 包 舍 一 个 sort 方 法 ， 它 根据 一 个 知道 如 何 对 两 个 数 
组 元 素 进 行 比 较 的 函数 对 数组 进行 排序 。 这 大 致 说 明了 sort 方 法 
的 工作 原理 以 及 比较 函数 在 其 中 的 作用 。 排 序 算法 为 大 家 所 熟知 
并 被 广泛 地 实现 ， 更 重要 的 是 ， 排 序 代 码 可 重用 于 任何 数据 集 。 但 
有 一 点 需要 注意 : 要 对 特定 的 数据 集 进 行 排序 ， 排 序 代 码 必须 知道 
如 何 对 这 些 数据 进行 比较 。 就 拿 数 字 列 表 、 名 称 列 表 和 对 和 象 列表 来 
说 吧 。 对 它们 进行 排序 时 ， 比 较 方式 取决 于 列表 项 的 类 型 : 对 于 数 
字 ， 我 们 使 用 <、> 和 == 进 行 比较 ;对 于 字符 串 ， 我 们 按 字母 顺序 进 
行 比较 (在 JavaScript 中 ， 也 可 以 使 用 <、> 和 == 进 行 比较 ) ;而 对 于 
对 象 ， 我 们 必须 采用 自 定义 的 方式 根据 对 象 的 属性 进行 比较 。 

对 Web 镇 可 乐 公司 的 产品 数组 进行 排序 之 前 ， 咱 们 先 来 看 一 个 简单 
的 示例 。 在 这 个 示例 中 ， 我 们 将 使 用 方法 sort 将 一 个 简单 的 数字 
数组 按 升序 排列 。 这 个 数组 如 下 : 




















var numbersArray = [60, 50, 62, 58, 54, 54]; 





为 此 ， 我 们 需要 编写 一 个 函数 ， 它 知道 如 何 比 较 这 个 数组 的 两 个 值 。 


这 是 一 个 数字 数组 ， 因 此 我 们 的 函数 需要 比较 两 个 数字 。 假 设 要 按 
升序 排列 ，sort 方 法 要 求 我 们 的 国 数 在 第 一 个 数字 大 于 第 二 个 数字 
时 返回 一 个 大 于 0 的 值 ， 在 它们 相等 时 返回 0， 并 在 第 一 个 数字 小 于 
第 二 个 数字 时 返回 一 个 小 于 0 的 值 ， 如 下 所 示 : 





上 述 数组 包含 的 是 数字 ， 因此 我 们 
需要 每 次 对 两 个 数字 进行 比较 。 


VS 


function compareNumbers(numl, num2) { 


我 们 首先 检查 num1 
和 从 一 一 ”是 全 大 于 num2; 如 


果 是 ， 残 退 品 1。 


if (numl > num2) { 


return 1:; 


} else If (numl === num2) 1 
return 0; < 如 果 它 们 相等 ， 
} else { 残 退 品 0。 
return -1l; 
: <、 最 后 ， 如 果 num1 小 于 num2 ， 
束 返 @ 一 1。 





提示 
Javascript 数 组 提供 了 
很 多 方法 ， 可 用 来 以 
各 种 方式 操作 数组 要 全 面 了 
解 这 些 方法 及 其 用 法 ， David 
FHanagan 所 车 的 《JavaScript 权 
威 指 南 》 尽 不 销 的 参考 ， 


















Ww 


你 知道 ， 传 递 给 sort 的 比较 函 
数 需要 根据 比较 结果 返回 一 个 大 
于 0、 等 于 0 或 小 于 0 的 数字 : 如 
果 第 一 项 大 于 第 二 项 ， 就 返回 一 
个 大 于 0 的 值 ， 如 果 第 一 项 等 于 
第 二 项 ， 就 返回 0， 如 果 第 一 项 
小 于 第 二 项 ， 惑 返回 一 个 小 于 0 
的 值 。 
利用 这 些 知 识 ， 你 能 够 重 
写 对 两 个 数字 进行 比较 的 
compareNumbers， 让 其 包 合 


更 少 的 代码 吗 ? 


继续 往 下 阅读 前 ， 请 务必 查看 本 
章 末 尾 的 答案 。 


























对 数字 数组 排序 


人 

整合 起 来 

编写 好 比较 函数 后 ， 只 需 对 numbersArray 调 用 方法 sort， 并 将 这 个 函数 
传递 给 它 即 可 ， 如 下 所 示 : 


var numbersArray = [60, 50, 62, 58, 54, 54]; 
对 数组 调用 方法 sort， 并 


numbersArray.sort(compareNumbers); < 
将 函数 compareNumbers 传 


console.log(numbersArray); 说 给 它 。 
代 方法 sort 执 行 完毕 后 ， 这 个 数组 将 控 所 升序 排列 的 数组 。 
升序 排列 。 为 验证 这 一 点 ， 我 们 将 这 
个 数 凶 不 前 Q | 全 。 - 
个 数 组 显示 到 探 制 台 JavaScript 控 制 全 





请 注意 ， 方 法 sort 是 破坏 性 的 ， 因 为 它 就 地 修改 [50，54，54，58，60，62] 
数组 ， 而 不 是 返回 一 个 排序 后 的 新 数组 。 一 


方法 sort 为 何 按 升 序 排 列 数 组 numbersRArravy 呢 ? 因为 我 们 在 比较 函数 中 返回 1、0 
和 -1 时 ， 实 际 上 是 在 这 样 告 诉 sort 方 法 : 


如 果 返 回 值 为 1， 就 将 第 一 项 放 在 第 二 项 后 面 ; 
如 果 返 回 值 为 0， 就 说 明 两 项 相等 ， 可 保留 它们 的 位 置 不 变 ， 
如 果 返 回 值 为 -1， 融 将 第 一 项 放 在 第 二 项 前 面 。 


要 修改 代码 ， 以 便 按 降序 排列 ， 只 需 反 转 上 述 逻 辑 ， 让 返回 值 1 表 示 将 第 二 项 放 在 
第 一 项 后 面 ， 返 回 值 -1 表示 将 第 二 项 放 在 第 一 项 前 面 (返回 值 0 表示 保持 位 置 不 变 ) 。 
请 编写 一 个 按 降序 排列 的 新 比较 函数 





function compareNumbersDesc(numl, num2) { 
if ( > ) { 
return 1; 
} else If (numl === num2) { 
return 0; 
} else { 


return -1l1:; 


问 到 Web 镇 可 乐 公司 





、 吕 兴 要 让 它 
”> Mn ， ， i 但 我 们 设 作 过 
该 利用 新 学 到 的 数组 排序 知识 帮助 Web 镇 可 乐 公司 了 。 当 然 ， 我 们 需 们 知道 这 一 点 。 
做 的 只 是 为 它们 编写 一 个 比较 函数 ， 但 这样 做 之 前 ， 再 来 看 一 眼 数组 
products: 
Var products = [ name: "Grapefruit", calories: 170, color: "red", sold: 8200 }, 


{ 
{ name: "Orange", calories: 160, color: "orange", sold: 12101 })}, 

{ name: "Cola", calories: 210, color: "caramel", sold: 25412 }), 

{ name: "Diet Cola", calories: 0, color: "caramel", sold: 43922 }, 
{ name: "Lemon", calories: 200, color: "clear", sold: 14983 }, 

{ name: "Raspberry", calories: 180, color: "pink", sold: 9427 }, 

{ name: "Root Beer", calories: 200, color: "caramel", sold: 9909 ), 
{ name: "Water", calories: 0, color: "clear", sold: 62123 } 


别 忘 了 ， 数 组 products 的 每 个 元 素 都 是 一 个 对 象 。 我 们 去 
比较 的 不 是 这 些 对 象 ， 而 是 它们 的 特定 属性 ， 如 sold。 


那么 我 们 按 什 么 排序 呢 ? 首先 来 按 销 量 以 升序 排列 ， 为 此 需要 比较 每 个 对 象 的 属 
性 sol9。 需 要 注意 的 一 上 把 是 ， 这 是 一 个 产品 对 象 数 组 ， 因 此 需要 癌 比 较 函 数 传递 
两 个 对 象 ， 而 不 古 两 个 数字 : 





< ~ compare5old 将 两 个 可 乐 产品 对 象 


0 为 参数 ， 并 六 
function compareSold(colaA, colaB) { 0 和 
If (colaA.sold > colaB.sold) { 和 en 


return 1; 
} else If (colaA.sold === colaB.sold) { 


return 0; < 
} else I sap 
ee ~ 这 让 图 孝 将 导致 方法 sort 根 
据 销量 升序 排列 可 乐 产品 。 
) 如 果 你 愿意 ， 完 全 可 以 像 前 面 的 练习 中 
部 样 简 化 这 些 代码 ! 


当然 ， 要 使 用 函数 compareSold 来 对 数组 prodqucts 进 行 排序 ， 只 需 调 用 该 
数组 的 方法 sort: 


products.sort(compareSold); Sn 


别 走 了， 可 对 任何 数组 (数字 数组 、 字 符 串 数组 、 对 象 
数组 ) 调用 方法 sort 来 按 任 何 顺序 (升序 或 降序 ) 排序 。 
通过 传 入 一 个 比较 函数 ， 我 们 获得 了 灵 话 性 ， 还 可 重用 
代码 。 


Ey 


现在 的 位 置 ， 461 





测试 Web 镇 可 乐 公 司 的 产品 排序 


测 汇 粳 让 化 态 
该 来 测试 我 们 为 Web 和 镇 可 乐 公司 编 写 的 代码 了 。 下 面 整 合 了 前 儿 页 的 所 有 代码 ， 
并 新 增 了 一 些 测 试 代码 。 因 此 你 只 需 创 建 一 个 简单 的 HTML 页 面 (cola.html) ， 
将 这 些 代 码 加 入 其 中 ， 再 进行 测试 . 


var products = [ 








{ name: "Grapefruit", calories: 170, color: "red", sold: 8200 }, 
{ name: "Orange", calories: 160, color: "orange", sold: 12101 }, 

{ name: "Cola", calories: 210, color: "caramel", sold: 25412 ), 

{ name: "Diet Cola", calories: 0, color: "caramel", sold: 43922 ), 
{ name: "Lemon", calories: 200, color: "clear", sold: 14983 }, 

{ name: "Raspberry", calories: 180, color: "pink", sold: 9427 }, 

{ name: "Root Beer", calories: 200, color: "caramel", sold: 9909 ), 
{ name: "Water", calories: 0, color: "clear", sold: 62123 } 


]; 


function compareSold(colaA, colaB) { [一 这 是 将 传递 给 方法 


if (colaA.sold > colaB.sold) { 5ort 的 比较 函数 。 
return 1; 
} else if (colaA.sold === colaB.sold) { 
return 0; 
} else { eo 
return -1; 这 是 一 个 新 增 的 函数 ， 已 以 误 
} > 高 的 格式 将 数组 products 打 EE 
已 代 厂 
下 控制 台 。 如 果 只 是 编写 代码 


console.log(products) 你 也 能 
看 到 输出 ， 但 不 那么 课 员 。 


function printProducts(products) { 
for (var i = 0; i < products.length; I++) { 
console.log("Name: " + Products[I].name + 
", Calories: " + products[i].calories 十 


", Color: " + products[i].color + 
", Sold: " + products[i].sold); 


} 我 们 首先 使 用 compareSold 来 对 数 
} 组 products 进 行 排序 。 2 
JavaScript 控 制 合 


products.sort(compareSold); s 
Name: Grapefruit, Calories: 170, Color: red，Sold: 8200 


printProducts(products); 


Name: Raspberry, Calories: 180, Color: Pink，Sold: 9427 
然后 将 排序 后 的 数组 打印 出 来 。 Name: Root Beer, Calories: 200, Color: caramel, Sold: 9909 
Name: Orange, Calories: 160, Color: orange，Sold: 12101 


Name: Lemon, Calories: 200, Color: clear, Sold: 14983 
` 填 汪 : 
这 是 我 们 运行 上 述 代码 得 到 的 输出 ， 注 意 > Cola, Calories: 210, Color: caramel, Sold: 25412 
到 数组 products 是 净 销 草 排序 的 。 Name: Diet Cola, Calories: 0, Color: caramel, Sold: 43922 
Name: Water, Calories: 0, Color: clear, Sold: 62123 
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编写 按 属 性 sold 对 可 乐 产 品 进行 排序 的 函数 后 ， 该 来 编写 用 于 按 其 他 各 种 属性 
的 es (name、calories 和 color) 进行 排序 的 比较 函数 了 。 请 仔细 查看 控制 台 输 出 ， 
给 习 - 确认 按 每 个 属性 排序 时 ， 可 乐 产品 的 排列 顺序 都 是 正确 的 。 答 案 见 本 章 末 尾 。 


请 补 全 下 面 的 三 个 比较 函数 。 


上 


function compareName(colaA, colaB) { 


提示 : 比较 字符 串 时 ， 
全 也 可 使 用 < > 和 ==。 


} 


function compareCalories(colaA, colaB) { 


function compareColor(colaA, colaB) { 


, 全 一 对 于 每 个 新 的 比较 办 


2 ~ A* 由 人 
products.sort(compareName); 数 ， 我 们 将 其 传说 给 
console.log("Products sorted by name:"); cot 方法 ， 再 在 控制 
printProducts(products); 台中 显示 结案。 


products.sort(compareCalories); 
console.log("Products sorted by calories:"); 


printProducts(products); 


products.sort(compareColor); 


console.log("Products sorted by color:"); 


printProducts(products); 


QA 


定义 函数 的 方 芭 有 两 种 : 使 用 
函数 声明 和 使 用 函数 表达 式 。 


甬 数 引用 是 一 个 指向 函数 的 


五 全 


函数 声明 在 执行 代码 前 处 理 。 


函数 表达 式 在 运行 阶段 随 其 他 

代码 一 起 执行 。 

0 4 数 声 明 时 ， 浏 览 器 创建 
函数 以 及 一 个 与 函数 同名 

a 并 将 指向 函数 的 引用 

存储 到 变量 中 。 

处 理 函 数 表 达 式 时 ， 浏 览 器 创 

建 一 个 函数 ， 但 你 必须 显 式 地 

处 理 指 向 这 个 函数 的 引用 。 


可 将 作为 一 等 公民 的 值 赋 给 变 
量 ， 包 含 在 数据 结构 中 ， 传 递 
给 函数 或 从 函数 返回 。 


函数 引用 是 作为 一 村 公民 的 
入 


数组 的 s ort 方 法 将 一 个 函数 
作为 参数 ， 这 个 函数 知道 如 何 
对 两 个 数组 元 素 进行 比较 。 


传递 给 sort 方 法 的 函数 必须 
返回 下 面 的 其 中 一 个 值 ， 大 于 
0 的 数字 、0 或 小 于 0 的 数字 。 


绒 习 各 案 





基于 前 述 浏览 器 处 理 函 数 gasuack 和 fly 的 代码 的 方式 ， 你 能 得 出 哪些 有 关 
函数 声明 和 函数 表达 式 的 结论 呢 ? 请 选择 你 认为 正确 的 所 有 说 法 。 继 续 
往 下 阅读 前 ， 务 必 查 看 本 章 末 尾 的 答案 。 


多 在 处 理 其 他 代码 之 前 ， 先 处 理 函 数 声 gf 可 在 变量 中 存储 指向 函数 的 引用 。 


日 eo 二 a 
I df 函数 声明 是 完整 的 语句 ， 而 函数 表达 
df 函数 表达 式 随 其 他 代码 一 起 被 处 理 。 式 只 是 语句 的 一 部 分 。 


WW 函数 声明 不 返回 指向 函数 的 引用 ;而 情 对 于 函数 声明 和 函数 表达 式 创建 的 函 
是 创建 一 个 与 函数 同名 的 变量 ， 并 将 。 ” 数 ， 用 相同 的 方式 处 理 调用 它们 的 语 


指向 函数 的 引用 赋 给 蕊 。 a 
Wf” 函数 表达 式 返 回 一 个 引用 ， 该 引用 指 DO 函数 声明 是 一 种 屡试不爽 的 函数 创建 
占 函 数 表 达 式 创建 的 函数 。 To 
J 应 尽 可 能 使 用 函数 声明 ， 因 为 它们 前 
先 锐 处 理 。 
这 两 种 说 法 
不 一 定 正 确 | 
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变 身 浏览 器 答案 


下 面 是 一 些 Javaoceript 人 代码。 你 的 任务 是 像 浏览 器 那样 执行 它们 ， 府 
在 每 企 镍 数 被 创建 时 ， 在 右边 将 其 记录 下 来 。 别 总 了 分 两 遍 
处 理 这 些 代码 第 一 遍 处 理 贸 数 声 明 ， 第 二 遍 处 理 铬 数 表 和 达 
式 。 


请 按 顺 序列 出 所 创建 函数 的 名 称 。 对 于 根据 名 

数 表 达 式 创建 的 荡 数 ， 列 出 它 被 赋 给 的 变量 的 
Var midi = true; 人 名 称 。 我 们 已 经 写 出 了 创建 的 第 一 个 函数 。 
var type= "piano"; 


var midiInterface; 


function play(sequence) { Ia 
// 函数 体 的 代码 pay 
} stop 
var Pause = function() { ce 
ee createMidi 
} pause 
function stop() { 0 
// 函数 体 的 代码 midilnterface 
} 


function createMidi() { 


// 函数 体 的 代码 





} 
if (midi) { 
midiInterface = function(type) { 
// 函数 体 的 代码 
}; 
} 





隆 笔 上 阵 
合 守 


St 





| 


为 牢 牢 地 记 住 函数 是 值 的 概念 ， 咱 们 来 玩 一 个 碰 运 气 取胜 的 游戏 。 
请 尝试 下 面 这 个 猿 豆 子 游戏 ， 你 会 赢 还 是 输 呢 ”请 试 一 试 ， 并 找 出 
结果 。 答 案 如 下 。 


Var winner = function() { alert("WINNER'") }; 和 、 
别 所 了 了， 这些 变量 分 别 存储 了 


至 上 1T 1 . 一 
var loser = function() { alert("LOSER!") }; 指向 函数 winner 和 |oser 的 引用 。 


// 咱们 来 热 热 身 刀 我 们 可 以 像 其 他 任何 值 一 样 ， 
es 人 将 这 些 引用 不 给 其 他 变量 

// 将 函数 引用 赋 给 其 他 变量 

var a = winner; \ 别 忘 了 ， 随 时 都 可 以 

Ye 调用 指向 函数 的 引用 。 

Var C = loser; 


a(); 
b(); 
// 来 玩 一 个 猜 豆 子 游戏 ， 看 看 你 的 运气 怎样 


ct . 
c = a; < Cc 指向 函数 winner 
Ct 央 
4 = b: 吧 一 3 指 同 函数 loser 
4 


&- 一 bp 指 同 函 数 winner 
二 c 指 同 函 数 loser 
c= a; a 指 向 函数 loser 
a 指向 消 数 winner 
Sg b 指 向 函数 loser 


a=b; 了 调用 a， 即 函 数 


| ] 
B= winner!! 


a(); 由 
The page at iocalhost says: 
© WINNER! 


b = Cc; 
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练习 答案 


等 


, 业 如 


AAANVAAAN 


的 代码 ， 看 看 它们 的 结果 是 什么 。 答 案 如 下 。 


function sayIt(translator) { 、N 定义 一 个 将 函 关 击 数 作为 参数 的 函数 ， 





下 面 来 热 热身 ， 芝 试 将 一 个 函数 传递 给 另 一 个 函数 。 请 在 心中 执行 下 面 
从 


ar phrase = translator("Hello"); 
va | );C、 并 在 其 中 调用 仿 入 提交 
alert(phrase); 
| ~ 
function hawaiianTranslator(word) { The page at localhos: es 
If (word == "Hello") return "Aloha"; 
if (word == "Goodbye") return "Aloha"; 


} A Eo 
将 函数 hawaiianTranslator 
sayIt(hawaiianTranslator); 传阅 给 函数 saylt。 





又 轮 到 你 了 : 编写 一 个 函数 ， 将 乘客 姓名 以 及 是 否 已 买 票 的 信息 打印 到 控制 合 。 
将 这 个 函数 传递 给 processPassengers， 对 其 进行 测试 。 我 们 编写 了 这 个 函数 
的 函数 头 ， 你 只 需 编写 其 代码 即 可 。 答 案 如 下 。 





乡 习 
答案 


\ 


function printPassenger(passenger) { 
Var message = passenger.name; 
If (passenger.paid === true) { 
message = message + " has paid'"; 


} else { 


message message + " has not paid"; 


} 


console.log(message); 


JavasScript 控 制 全 


return false; 一 一 


| 个 返回 值 没 多 大 意义 ， 固 为 在 Jane Doloop has paid 


Sue Property has not paid 


procesoPaosengers 中 ， 设 有 考 
虑 这 发 个 返 © 的 结 ZN o 
John Funcall has bai 
processPassengers(passengers, printPassenger); paid 





468 第 10 章 


降 





诸 注 意 ， 你 的 浏览 
示 的 函数 fun 和 boo 浏览 器 中 执 
、 、 二 个 < 同色 浊 顺 


行 这 些 代码 。 


SS 


洗 做 题 (这 涉及 
接 下 来 要 介绍 的 
内 容 ) 


疝 絮 


| 
分 


中 在 控制 台中 显 
的 值 可 能 不 同 ， 


function fun(echo) { 
console.log(echo); 


}> 


下 面 的 代码 创建 了 一 个 函数 ， 





并 将 其 赋 给 变量 fun。 


function fun(echo) 1 


Genseclealioc (eene)s 


请 执行 下 面 的 代码 ， 并 将 其 输出 写 在 右边 。 请 先 在 心中 执行 这 些 代码 ， 如 果 


看 不 懂 ， 再 在 计算 机 中 执行 它们 。 


fun("hello"); 


function boo(aFunction) { 
aFunction("boo"); 


} 

boo (fun) ; 
console.log(fun); 
fun(boo); 

var moreFun = fun; 
moreFun("hello again"); 
function echoMaker() { 


return fun; 


} 


var bigFun = echoMaker(); 
bigFun("Is there an echo?"); 


继续 往 下 阅读 前 ， 务 必 查 看 并 理解 


hello 


boo 


function fun(echo) { console.log(echo);} 


function boo(aFunction) {aFunction( “boo );} 


helloagain 


ls there an echo? 


答案 ， 这 非常 重要 | 
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练习 答案 


你 的 任务 是 修改 前 面 的 代码 ， 以 支持 第 三 类 乘客 : 肾 华 经 济 舱 乘 客 。 对 于 豪华 
经 济 舱 乘客 ， 除 了 可 乐 和 开水 外 ， 还 可 以 点 葡萄 酒 。 另 外 ， 请 实现 支持 下 述 菜 
单 的 getDinnerOraderEunction。 

头等 舱 : 鸡肉 或 意大利 面 。 

罕 华 经 济 舱 : 快餐 或 芝士 拼盘 。 

经 济 舱 : 花生 饼 或 椒盐 脐 饼 。 


答案 如 下 。 





Var passengers = [ { name: "Jane Doloop", paid: true, ticket: "coach" )}， 
{ name: "Dr. Evel", paid: true, ticket: "firstclass" }, 
{ name: "Sue Property", paid: false, ticket: "firstclass" }, 
{ name: "John Funcall", paid: true, ticket: "premium”" } ]; < 
function createDrinkOrder(passenger) { 为 方便 测试 这 里 的 新 代码 ， 
var orderFunction; 我 们 将 John Funcall 购 买 的 机 
if (passenger.ticket === "firstclass") { 受 类 型 改 成 了 豪华 经 济 稻 。 
orderFunction = function() { 


alert("Would You like a cocktail or wine?"); 
}; 
} else if (passenger.ticket === "premium") { 


orderFunction = function() { 、 这 是 处 理 豪华 经 济 舱 的 新 代码 ， 将 
根据 乘客 购买 的 机 票 类 型 ， 在 三 个 
让 乘客 点 饮料 的 函数 中 返回 一 个 . 


alert("Would you like wine, cola or water?"); 
}; 
} else I 
orderFunction = function() { 
alertl("Your choice is cola or water."); 
}; 
} 


| 和 八 将 所 有 相关 的 亡 辑 都 封装 在 一 个 函数 
汶 个 节 数 知道 如 何 为 乘客 创建 正确 的 只 
饮料 图 数 。 这 提供 了 极 大 的 俐 和 。 
行 议 些 远 辑 ， 
让 乘 点 饮料 时 ， 无 需 执 行 这 旦 之 
这 和 己 汉 有 了 一 个 专 为 该 委 客 定制 的 点 


饮料 苑 数 。 
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function createDinnerOrder(passenger) { 
var orderFunction; 
if (passenger.ticket === "firstclass") { 


orderFunction = function() { 





alert("Would You like chicken or pasta?"); 


仅 我 们 添加 了 一 个 全 新 的 函 
5 数 createpinnerCrcer， 和 
orderFunction = function() { 于 创建 让 乘客 点 餐 的 鸭 效 。 


alert("Would You like a snack box or cheese plate?"); 


}; 


} else { 
orderFunction = function() { 人 一 这 个 函数 的 工作 原理 与 
alert("'Would you like Peanuts or pretzels?"); createDrinkOrder 相 同 : 
}; 检查 乘客 购买 的 机 票 类 
} 型 ， 并 据 此 返回 一 个 为 
return orderFunction; 乘客 定 制 的 点 餐 六 数 。 


function serveCustomer(passenger) { 
var getDrinkOrderFunction = createDrinkOrder(passenger); 
var getDinnerOrderFunction = createDinnerOrder(passenger); 所 ~ 为 乘 容 创建 正确 的 
点 餐 函 数 …… 


getDrinkOrderFunction(); 


// 让 乘客 点 餐 0 
getDinnerOrderFunction(); 当 入 乘客 吕 餐 时 ， 我 

们 都 调用 这 个 函数 。 
getDrinkOrderFunction(); 


getDrinkOrderFunction(); 


// 播放 电影 


getDrinkOrderFunction(); 


// 清理 垃圾 


function servePassengers(passengers) { 
for (var i = 0; i < passengers.length; i++) { 


serveCustomer(passengers[i]); 


servePassengers(passengers); 
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练习 答案 


你 认为 下 面 的 代码 是 做 什么 的 ? 你 能 通过 几 个 示例 来 说 明 如 何 使 
用 这 个 函数 吗 ? 答案 如 下 。 


function addN(n) { “这 个 卫 闭 接受 一 个 参数 n。 它 创建 并 返回 一 
Var adder = function(x) { ,一 这 这 样 的 函 数 ， 也 接受 一 个 参数 x， 并 返回 n 与 x 





return n 十 x; 的 和 。 
}; 
return adder; 
} 可 便 间 浊 玉 全 一 不同 者 光 人 > var add2 = addN(2); 
入 的 数字 加 上 2 的 函数 ， 如 这 里 所 示 : console.10g(add2(10)); 


console.log(add2(100)); 





方法 sort 为 何 按 升序 排列 数组 
ee 因为 我 们 a 


实际 上 是 在 这 文 样 告诉 sort 方 法 : 返 ee 0 或 小 于 0 的 娄 字 如 采 第 ;一 项 
大 于 第 二 项 ， 就 返回 一 个 大 于 0 的 信 ， 如 果 第 一 项 和 

] 反 头 年 第 一 项 第 二 项 
| 于 第 二 项 ， 就 返回 0， 如 果 第 一 项 小 于 第 二 项 ， 就 反 





如 果 返 回 值 为 0， 就 说 明 两 项 相等 ， 可 保留 它们 的 位 置 回 一 个 小 于 0 的 值 。 
不 变 ，; 
A 二 利用 这 些 知 识 ， 你 能 够 重 写 对 两 个 数字 进行 比较 的 
0 回 直 -1]， 每 多 第 一 项 广 全 二 项 I 
各 采 返 回信 为 -1， 研 将 Be EE compareNumbers， 让 其 包含 更 少 的 代码 吗 ? 


要 修改 代码 ， 以 便 按 降序 排列 ， 只 需 反 转 上 述 逻 辑 ， 


让 返回 值 1 表 示 将 第 二 项 放 在 第 一 项 后 面 ， 返 回 值 -1 表 答案 如 下 。 
不 将 第 二 项 放 在 第 外 一 项 前 面 (返回 值 0 表 示 保 持 位 置 不 
变 ) 。 请 编写 一 个 按 降序 排列 的 新 比较 函数 。 function compareNumbezrs (num1L1，num2) { 
return numl - num2; 
function compareNumbersDesc(numl, num2) { } 
If (num2 > num1 ) { » 


通过 返回 将 um2 和 num1 相 减 的 结果 ， 可 
将 这 个 函数 简化 为 只 包含 一 行 代码 。 请 通 


return 1; 


} else if (numl == num2) 1 过 两 三 人 个 示例 来 理解 其 中 的 工作 原理 。 及 | 
ES 忘 了 ， 方 法 sort 有 2 
} else { 于 、 等 于 或 小 于 0 的 数字 ， 而 不 是 1、 
式 一 1 (虽然 很 多 比较 函数 都 返回 这 


return -1l1:; 


值 ) 。 


编写 按 属性 sold 对 可 乐 产 品 进 行 排序 的 函数 后 ， 该 来 编写 用 于 按 其 他 各 种 属性 name、 
calories 和 color) 进行 排序 的 比较 函数 了 。 请 仔细 查看 控制 侣 输出， 确认 按 每 个 属性 
排序 时 ， 可 乐 产 品 的 排列 顺序 都 是 正确 的 。 答 案 如 下 。 


下 面 是 各 个 比较 函数 的 实现 。 


上 


function compareName(colaA, colaB) { 
if (colaA.name > colaB.name) 1 
return 1; 
} else if (colaA.name === colaB.name) { 
return 0; 
} else { 
return -1; 
} 
} 


function compareCalories(colaA, colaB) { 
if (colaA.calories > colaB.calories) { 
return 1; 
} else if (colaA.calories === colaB.calories) 
return 0; 
} else { 
return -1; 
} 
} 


function compareColor(colaA, colaB) { 
If (colaA.color > colaB.color) { 
return 1; 
} else If (colaA.color === colaB.color) { 
return 0; 
} else { 
return -1l; 
} 
} 全 一 对 于 每 个 新 的 比较 画 
数 ， 我 们 将 其 传递 给 
products.sort(compareName); ont 再 在 控制 
console.log("Products sorted by name:"); 公 中 显示 结果 
printProducts (products); SY Mo 


products.sort(compareCalories); 
console.log("Products sorted by calories:"); 
printProducts(products); 


products.sort(compareColor); 
console.log("Products sorted by color:"); 
printProducts(products); 
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自从 学 了 区 名 了 镶 数 ,我 的 
表达 能 力 强 了 三 傍 。 


你 已 经 全 面 了 解 了 函数 ， 但 还 需 更 深入 地 学 习 。 本 章 将 再 进一步 ， 深 
入 图 数 的 核心 ， 演 示 如 何 娴熟 地 利用 扬 思 才 、 这 一 章 虽 然 不 太 长 ， 但 涵盖 的 知识 点 
韭 常 多 ;， 阅读 完 本 章 后 ， 你 的 JavaScript 表 达能 力 将 超 平 你 的 想象 。 你 还 将 为 与 人 
协作 编写 代码 或 使 用 开源 JavaScript 库 作 好 准备 ， 因 为 我 们 将 介绍 一 些 与 图 数 相关 
的 第 见 编码 习惯 和 约定 。 如 果 你 从 未 听 说 过 匿名 函数 和 闭 包 ， 那 真是 来 对 了 地 方 。 


如 果 你 听 说 过 闭 包 ， 但 不 大 确定 
fC:; 那么 更 是 来 对 了 地 方 | 
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镶 数 的 另 一 面 

你 已 经 见识 了 函数 的 两 个 方面 : 你 见识 了 函数 声明 正规 、 说 明 性 的 一 面 ， 还 
见识 了 函数 表达 式 更 宽松 、 表 达 力 更 强 的 一 面 。 现 在 癌 你 介绍 函数 有 趣 的 男 一 
面 : 匿名 性 。 

所 谓 匿名 (anonymous) ， 指 的 是 没有 名 称 的 国 数 。 怎 么 可 能 出 现 这 样 的 情况 
呢 ? 使 用 函数 声明 定义 函数 时 ， 必 须 给 它 指定 名 称 ， 但 使 用 函数 表达 式 定义 
国 数 时 ， 不 必 给 它 指 定名 称 。 

你 可 能 会 说 ， 这 确实 很 有 趣 ， 也 是 有 可 能 的 ， 但 那 又 如 何 呢 ?通过 使 用 匿名 
国 数 ， 可 让 代码 更 简洁 精练 ， 可 读 性 更 强 ， 效 率 更 高 ， 甚 至 更 易于 维护 。 

下 面 来 看 看 如 何 创建 和 使 用 匿名 函数 。 我 们 将 从 以 前 见 过 的 一 个 代码 片段 着 
手 ， 看 看 匿名 函数 可 提供 什么 样 的 帮助 。 























这 是 一 个 加 载 事 件 处 理 程 序 ， 我 们 首先 定义 了 一 个 函数 ， 
( 指定 方式 与 以 前 相同 。 这 个 函数 有 名 称 handlor 


function handler() { alert("Yeah，that Page Loaded!"); } 


window.onload = handler:; 


人 接 下 来 ， 我 们 使 用 这 个 函数 的 名 称 


(handler) 将 其 赋 给 window 对 象 的 这 样 ， 网 页 加 载 完毕 后 ， 
属性 onload。 将 调用 函数 handler。 


隆 笔 上 阵 


KC 





请 根据 你 已 有 的 函数 和 变量 知识 ， 判 断 下 述 哪些 说 法 是 正确 的 。 


DD 变量 nandler 存 储 了 一 个 函数 引用 。 DQ 调用 on1oad 处 理 程序 两 次 是 个 馈 主 意 ， 
RE 0 为 这 种 处 理 程序 通常 用 于 为 整个 网 页 做 一 
必 handQdler 糯 个 winQow.onloaQHJ， 头 人 a 站 ee 

些 初 始 化 工作 ， 多 次 调用 它 可 能 引发 问题 。 


际 上 是 将 一 个 函数 引用 赋 给 了 它 。 
D 变量 handqlez 仅 用 于 将 其 存储 的 函数 引用 

赋 给 windqow.onload。 D 我 们 是 不 是 说 过 ， 将 handqler 赋 给 window. 
onload 时 ， 实 际 上 是 将 一 个 函数 引用 赋 给 
J 


函数 表达 式 创建 函数 引用 。 


”我 们 绝 不 会 再 次 使 用 nandler， 因 为 其 代 
码 仅 在 网 页 加 载 完毕 后 执行 一 次 。 
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如 何 使 肝 匿 名 咯 数 


我 们 创建 了 一 个 处 理 加 载 事 件 的 函数 ， 但 我 们 知道 这 是 一 个 一 次 性 函数 ， 因 为 在 每 个 网 页 
中 ， 加 载 事件 只 发 生 一 次 。 我 们 还 广 意 到 ， 将 一 个 国 数 引用 (具体 地 说 是 nandler 存 储 的 
图 数 引用 ) 赋 给 了 属性 windqow.onload。 然 而 ， 由 于 handlez 是 个 一 次 性 图 数 ， 这 个 名 
称 显得 有 点 多 余 ， 因 为 我 们 仅 使 用 它 来 将 其 存储 的 引用 赋 给 属性 window.onload。 


匿名 函数 据 供 了 一 种 们 化 这 些 代码 的 途径 。 匿 名 函数 是 没有 名 称 的 尔 数 表达 式 ， 用 于 通 疝 
需要 函数 31 用 的 地 方 。 为 明白 这 一 点 ， 来 看 看 如 何在 代码 中 以 匿名 方式 使 用 函数 表达 式 。 




















function handier() { alert("Yeah, that page loaded!'"); 


} < 首先 ， 将 变量 handler 删 除 ， 
window.onload = handier; 


} 2 变 成 一 个 函数 表达 式 ， 






然 文 个 级 
function { alertl("Yeah, that page loaded!'"); } 然后 ， 将 这 个 函数 表达 式 直 


接 赋 给 属性 window.onload。 





window.onload = 


Ew 


window.onload = function() { alertl("Yeah, that Page loaded!"); }); 这 样 就 将 处 理 程序 
人 赋 给 了 属性 window. 
load， 且 设 有 使 用 
通过 将 所 需 的 函数 直接 赋 给 属性 onload ， 不 必要 的 名 称 ， 
代码 简洁 多 了 。 另 外 ， 我 们 没有 指定 函 
数 名 ， 这 避免 了 在 其 他 代码 中 错误 地 使 
用 它 。 (和 毕竟，handler 是 一 个 很 常见 的 名 看 ， 设 有 名 称 ! 
称 ! ) 


ye" 
A 


在 本 书 前 面 的 代码 中 ， 是 否 有 你 疫 有 意识 到 的 匿名 函数 ? 





“中 次 区 到 雏 讽 坦 炎 埋 册 也 : 泪 群 
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匿名 函 


数 的 练习 


KC 





尽 可 能 地 使 用 匿名 函数 重新 编 
你 还 需 完成 另 一 个 任务 : 将 这 些 


小 


请 


/ 


py 
降 笔 上 阵 

在 下 面 的 代码 中 ， 有 几 个 地 方 都 可 使 用 匿名 函数 。 
与 这 些 代码 。 你 可 将 旧 代 码 删 除 ， 并 写 入 新 代码 


代码 中 的 匿名 函数 圈 出 来 


= init; 


window.onload 
var cookies = { 
instructions: "Preheat oven to 350 
bake: function(time) { 
console.log("Baking the cookies.") 
time); 


setTimeout (done, 


}; 
function init() { 
var button = 


button.onclick 


document.getElementById("bake") 


handleButton.; 


} 
function handleButton() { 
console.log("Time to bake the cookies.") 


cookies.bake(2500) 
take them out to cool.") 


} 
function done() ({ 
alert("Cookies are ready, 


console.log("Cooling the cookies.") 


Var cool = function() { 
alert("Cookies are cool, time to eat!") 


}; 
setTimeout(cool, 1000) 
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别 这 人 么 哆 咏 好 不 好 

我 不 想 旧 话 重 提 ， 因 为 你 已 经 深入 地 学 习 了 函数 ， 知 道 如 何 传递 函数 、 如 
何 将 其 赋 给 变量 、 如 何 将 其 传递 给 函数 以 及 如 何 从 函数 返回 它们 ， 但 你 使 
用 函数 的 方式 还 是 太 哆 嗪 ( 换 而 言 之 ， 你 的 表达 能 力 依然 没有 达到 应 有 的 
水 平 ) 。 我 们 来 看 一 个 示例 吧 。 


这 个 名 为 cookieAlarm 的 函数 看 起 
来 很 正常 ， 它 显示 一 个 提示 框 ， 
指出 小 甜 饼 做 好 了 。 


Y 


function cookieAlarm() { 





alert("Time to take the cookies out of the oven"); 
}; 


上 一 一 小 甜 饼 将 在 10 分 钟 后 做 好 。 
setTimeout(cookieAlarm, 600000); 


本 提醒 一 下 ， 这 个 数字 的 单位 为 毫秒 ， 


a i 因此 60 000/1000/60 = 10 分 钟 。 
将 前 述 函 数 作 为 实 参 传递 给 setTimeout。 


这 些 代 码 看 起 来 挺 好 ， 但 通过 使 用 匿名 国 数 ， 可 使 其 更 加 紧凑 。 如 何 做 到 呢 ? 
看 看 调用 setTimeout 时 使 用 的 变量 cookieAlarm 吧 。 这 个 变量 是 一 个 函数 引 
用 ， 也 束 古 说 ， 调 用 setTimeout 时 ， 传 入 了 一 个 尔 数 5| 用 。 要 获取 函数 5| 用 ， 

-种 方式 是 使 用 指向 函数 的 变量 ， 田 一 种 方式 与 两 页 前 的 window.onload 示 例 
一 样 ， 使 用 函数 表达 式 。 下 面 使 用 函数 表达 式 来 重 写 上 述 代码 。 











请 注意 这 里 的 语法 。 我 们 书写 了 以 右 花 括号 结尾 的 整个 


这 里 调用 setTimeout 时 没有 使 用 变量 ， 函数 表达 式 ， 然 后 像 其 他 实 参 一 样 ， 在 它 后 面 加 上 去 
而 是 直接 使 用 函数 表达 式 。 了 号 ， 再 添加 下 一 个 实 参 。 


setTimeout(function() { alert("Time to take tt 上 he cookies out of the oven");}, 600000); 


《 逊 数 表达 式 的 后 面 ) 





我 们 指定 了 要 调用 的 函数 的 名 称 setTimeout， 在 是 第 二 个 实 参 。 
它 后 面 加 上 图 括号 ， 再 加 上 第 一 个 实 参 一 一 一 个 
函数 表达 式 ，。 
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调整 匿名 函数 表达 式 格式 











你 骗 准 呢 ? 这 大 乱 了 。 谁 喜欢 
阅读 这 么 长 的 一 行 代码 呢 ? 如 果 
镶 数 更 长 、 更 复杂 呢 ? 


对 于 简短 的 代码 片段 ， 写 成 一 行 提 好。 但 在 其 
他 情况 下 ， 你 说 的 没 错 ， 这 样 编 写 代 人 码 太 难 看 
了 。 不 过 你 知道 ， 在 JavaScript 中 ， 可 大 量 使 用 空 
白 ， 因 此 可 以 根据 需要 插入 任意 数量 的 空格 和 回 
车 ， 以 提高 代码 的 可 旋 性 。 下 面 调整 了 前 一 页 的 
setTimeout 人 代码 的 格式 .。 


我 们 只 是 插入 了 一 些 空 自 ， 
即 座 加 一 些 空格 和 回 车 。 
setTimeout(function() ({ 


alert("Time to 七 ake the cookies out of the oven"); 


}, 600000); 





| 这 样 ， 代 码 的 可 读 性 高 得 多 


了 。 很 高 兴 你 提出 这 个 问题 。 
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等 等 ， 我 想 我 明白 7 了 。 隔 数 表 达 式 的 结果 是 一 
个 苹 数 引用 ,有 因此 在 任何 需要 芒 数 引 膨 的 地 
方 ， 都 可 以 使 赂 唔 数 表 达 式 。 是 久 样 的 吗 ? 





说 得 有 点 描 口 ， 不 过 你 理解 的 没 错 。 这 是 理 
解 国 数 生 一 等 公民 的 关键 之 一 。 在 需要 图 数 
引用 的 地 方 ， 邦 可 使 用 函数 表达 式 ， 因 为 其 
结 东 束 是 一 个 国 数 引用 。 正 如 你 刚才 看 到 的 ， 
如 采 需 要 将 一 个 国 数 作为 实 参 ， 可 将 实 参 指 
定 为 函数 表达 式 (同样 ， 传 递 前 将 获取 其 结 
林 一 一 一 个 国 数 引 用 ) 。 同 样 ， 如 采 需 要 从 
国 数 返 回 一 个 国 数 ， 也 可 返回 一 个 国 数 表 达 
了 
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关于 匿名 函数 的 问题 





用 作 实 参 的 代码 进 


为 确保 你 理解 了 将 匿名 函数 表达 式 传 递 给 函数 的 语法 ， 请 对 下 述 将 变量 
行 修改 ， 将 匿名 函数 表达 式 用 作 实 参 。 


function vaccine(dosage) { 
if (dosage > 0) { 
inject(dosage); 


administer(patient, vaccine, 


\S 

8 
人 | ; 这样 使 用 匿名 函数 看 起 来 确实 
星 涩 难 懂 ， 我 真 的 需要 熟悉 这 种 做 法 
吗 ? 
As ， 
合 ， 你 必须 熟 关 。 在 JavaScript 代 码 
中 ， 经 常会 使 用 匿名 函数 表达 式 。 要 
读 懂 别人 编写 的 代码 或 JavaScript 库 ， 
你 必须 知道 其 中 的 工作 原理 ， 并 能 够 
识别 匿名 函数 表达 式 。 


[9) ， 使 用 匿名 函数 表达 式 真 的 更 好 
吗 ? 在 我 看 来 ， 这 样 做 只 会 让 代码 更 
复杂 ， 更 难 阅读 和 理解 。 
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time); 


世上 没有 
晶 知 的 问题 


AAA ， 

从 ， 这 需要 时 间 。 随 着 时 间 的 推移 ， 
你 将 能 够 轻松 地 分 析 这 样 的 代码 。 另 
外 ， 在 很 多 情况 下 ， 这 种 语法 都 可 降 
会 代码 的 复杂 度 ， 让 代码 更 整洁 ， 其 
意图 更 清晰 。 虽 然 如 此 ， 过 度 地 使 用 
这 种 技巧 绝对 可 能 导致 代码 极 难 理解， 
但 只 要 坚持 ， 你 就 能 掌握 这 种 语法 ， 
届时 它 将 变 得 更 容易 理解 ， 也 更 有 用 。 
你 将 遇 到 很 多 大 量 使 用 匿名 甩 数 的 代 
码 ， 因 此 最 好 将 这 种 技巧 加 入 你 的 代 
码 工具 腰带 。 


人 
人 ] ， 猎 然 作 为 一 等 公民 的 函数 用 途 
这 么 大 ， 为 何其 他 语言 不 支持 它 ? 


(这 里 是 vaccine) 


将 转换 后 的 版 本 写 
在 这 里 ， 再 查看 本 
章 末尾 的 答案 ， 然 
后 接着 往 下 阅读 。 


VA@ A 

只 ”实际 上 支持 (那些 当前 不 支持 的 
也 正在 考虑 这 样 做 ) 。 例 如 ，Scheme 
和 Scala 等 语言 与 JavaScript 一 样 ， 全 面 
支持 将 函数 作为 一 等 分 民 ; 而 PHP、 最 
新 的 Java 有 版 本 、C# 和 Objective-C 等 语 
言 在 一 定 程 度 上 支持 将 函数 作为 一 等 
公民 。 随 着 越 来 越 多 的 人 认识 到 将 函 
数 作为 一 等 公民 在 编程 语言 中 的 价值 ， 
将 有 更 多 的 语言 提供 这 样 的 支持 。 然 
而 ， 每 种 语言 支持 的 方式 都 稍 有 不 同 ， 
因此 当 你 探索 其 他 语言 的 这 种 功能 时 ， 
一 定 要 有 心理 准备 。 
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比 数 是 在 什么 时 候 足 义 的 ? 近 要 看 情况 


冰 数 有 一 个 很 微妙 的 地 方 ， 我 们 还 未 提 及 。 别 夸 了 ， 议 蜗 絮 分 两 过来 处 理 JavaScript 人 代码， 第 一 
遇 ， 训 览 右 分 析 所 有 的 国 数 声明 ， 并 定义 这 些 国 数 声明 创建 的 国 数 ， 第 二 过 ， 剖 览 右 按 从 上 到 下 
的 顺序 执行 代码 ， 并 定义 函数 表达 式 创 建 的 函数 。 有 鉴于 此 ， 使 用 函数 声明 创建 的 函数 十 在 使 用 


国 数 表达 式 创 建 的 国 数 之 前 定义 的 ， 而 这 又 决定 了 你 可 在 什么 时 候 和 什么 地 方 调用 国 数 。 


为 明 昌 这 一 点 ， 来 看 一 个 具体 的 示例 。 下 面 的 代码 摘 目 上 一 章 ， 但 稍微 调整 了 一 下 顺序 。 下 面 来 
处 理 这 坚 代 但 。 











请 务必 按 数 字 标 示 的 顺序 


> ~ 人 > < LE 阅读 ， 从 1 开始 ， 且 到 2， 
从 代码 开头 开始 ， 查 找 所 有 的 函数 声明 。 仪 此 类推 。 这 很 重要 。 


@@ 再 次 从 代码 开头 开始 ， 这 次 执行 代码 。 


var migrating = true; @@ 创建 交 量 migrating,， 并 将 其 设置 为 true。 


注意 到 我 们 将 if (migrating) { @@ 条 件 为 true， 因此 执行 后 面 的 代码 块 。 


这 条 if 语句 从 二 Mr ， 
代码 末尾 移 到 quack (4) ; ee 并 使 用 
了 这 里 f 实 参 4 调用 它 。 
1y (0); @@ 获取 交 量 f1y 存 储 的 函数 引用 。 糟 糕 ，f1y 
} 还 没有 定义 ! 


var fly = function(num) { 
for (i = 0; i < num; I++) { 


console.log("Flying!"); 


找到 一 个 函数 声明 。 定 义 它 创建 的 函数 ， 并 
， 将 二 赋 绘 变量 K。 
function quack(num) { 生 共 几 分 变量 quac 
for (i = 0; i < num; I++) { 


console.log("Quack'"); 


} 


3 已 到 达 代 码 末 尾 。 只 找到 了 一 个 函数 声明 。 


你 现在 的 位 置 ， 
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函数 何 时 定义 


为 何 fly 未 定义 


你 知道 ， 试 图 调用 函数 fly 时 它 还 未 定义 ， 为 什么 会 这 样 呢 ?” 毕 葛 quack 一 
尽 回 题 部 没有。 你 可 能 猜 到 了 ， 不 同 于 函数 声明 quack， 在 第 一 裔 处 理 代 
码 时 被 定义 ，f£1ly 要 等 到 第 二 过 从 上 到 下 执行 代码 时 才 被 定义 。 我 们 再 来 





JavaScript 控 制 台 


Quack! 
有 一 下 : Quack! 
Quack! 
执行 这 些 代 码 ， 并 尝试 调 用 J 者 Ete qd 
人 这 和 皇 仆 的， 开县 试 凋 用 quack 时 ， 一 切 都 如 预期 的 | 
那样 ， 因为 quack 在 第 一 沪 处 理 代码 时 就 定义 了 ， ypekrror: undefined is not a function 





试图 调用 未 定义 的 函数 时 出 现 的 


var migrating = true; 


尝试 调用 函数 fly 时 出 现 了 错 情况 
if (migrating) { 误 ， 因 为 它 还 未 定义 …… 
人 人 根据 你 使 用 的 浏览 器 ， 出 
fly (4); 现 的 错误 可 能 类 似 于 下 和 
} 这 样 : TypeError Property 


这 是 由 于 fly 要 等 到 这 ‘fly ofobject [object Object] 
var fly = function(num) { 令 条 语句 执行 时 才 会 被 is not afunction。 


for (var i = 0; i < num; i++) { 定义 ， 而 这 条 语句 位 
console.log("Flying!"); 菠 数 fly 的 语句 
}; 
function quack(num) { 

for (var i = 0; i < num; i++) { 


console.log("Quack!"); 


} 





这 到 底 意 味 着 什么 呢 ? 首先 ， 这 意味 着 可 将 国 数 声明 放 在 任何 地 方 〈 代 码 的 开头 、 
末尾 、 中 间 ) ， 且 可 在 任何 地 方 调用 它们 。 在 代码 的 任何 地 方 ， 函 数 声明 创建 的 函 
数 都 是 已 定义 的 ， 这 被 称 为 提升 (hoisting) 。 


国 数 表 达 式 显然 不 同 ， 因 为 它 创建 的 国 数 要 等 到 它 执 行 后 才 被 定义 。 因 此 ， 即 便 将 
国 数 表达 式 赋 给 全 局 变量 (如 前 面 的 fly) ， 也 要 等 到 它 创建 的 国 数 被 定义 后 ， 才 
能 使 用 这 个 全 局 变量 来 调用 该 函数 。 

在 这 个 示例 中 ， 两 个 函数 的 作用 域 都 古 全 局 。 这 意味 着 这 两 个 函数 被 定义 后 ， 在 代 


码 的 任何 地 方 都 是 可 见 的 。 我 们 还 需要 券 虑 髓 人 套 函 数 (在 其 他 函数 中 定义 的 函数 ) ， 
因为 这 会 影 啊 函数 的 作用 域 。 下 面 就 来 看 看 。 
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和 


在 尔 数 中 定义 其 他 函数 完全 可 行 ， 这 时 味 着 你 可 以 在 函数 中 使 用 函数 声明 或 函数 表达 式 。 
es 简单 地 说 ， 在 代码 顶层 定义 的 函数 与 在 函数 中 定义 的 函数 
之 间 的 唯一 差别 在 于 ， 它 们 的 作用 域 不 同 。 换 言 之 ， 将 函数 放 在 男 一 个 函数 中 时 ， 将 影 
啊 它 在 代码 的 哪些 地 方 可 见 。 


为 明白 这 一 点 ， 来 稍微 扩展 一 下 前 面 的 示例 ， 添 加 一 些 髓 套 (nested) 的 函数 声明 和 函数 
var migrating = true; 


var fly = function(num) { /一 一 在 范 数 表达 式 fly 中 ， 添 加 了 一 个 
名 为 wingFlapper 的 函数 声明 。 


var sound = "Flying"; 

function wingFlapper() { 
console.log(sound); 

} 


for (var i = 0; i < num; i++) { 


wingFlapper(); 二 一 _ 调 用 wingFlapper。 


上 


function quack(num) { 


var sound = "Quack"; ET 在 了 东 数 声明 quack 中 ， 添 加 了 一 
var quacker = function() { 个 卫 孝 表达 式 ， 并 将 其 赋 给 变 
console.log(sound); = net 
}; 
for (var i = 0; i < num; i++) { 
quacker(); 
} 调用 quacker。 
} 
if (migrating) { 
quack (4); 
fly(4); 。 ”~ 将 这 些 代码 移 到 最 后 ， 以 免 调 用 
} fly 时 引发 错误 。 


在 上 述 代 码 中 ， 用 铅笔 标 出 函数 fly、quack、wingFlapper 和 quacker 


- 线 尺 。 的 作用 域 。 另 外 ， 标 出 你 认为 这 些 函 数 可 见 但 还 未 定义 的 地 方 。 
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函数 嵌 套 与 作用 域 


马 客 对 作 周 城 的 彩 响 


在 代码 顶层 定义 的 函数 是 全 局 的 ， 而 在 函数 中 定义 的 函数 是 局 部 
有 的。 下 面 来 研究 一 下 这 些 人 代码， 看 看 每 个 函数 的 作用 域 ， 同 时 确 
定 各 个 函数 在 什么 地 方 是 已 定义 的 ( 即 不 是 undefined) 。 





在 代码 顶层 定义 的 东西 都 是 全 局 
人 的 ， 因 此 fly 和 aquack 都 是 全 局 变量 ， 


var migrating = true; 但 别 忘 了 ， 仅 当 执 行 这 个 函数 表 
达 式 后 ，fly 才 是 己 定 义 的 。 


var fly = function(num) { 
var sound = "Flying"; 、 
function wingFlapper() { windFlapper 是 在 函数 fly 中 由 一 个 范 数 声 明定 
console.log(sound); 的 ， 因 此 其 作 用 域 为 整个 fy 函数 ， 即 在 fly 节 效 
} 的 整个 函数 体内 都 是 已 定义 的 。 
for (var i = 0; i < num; i++) { 


wingFlapper(); 


}; 
function quack(num) { quacker 是 在 函 数 quack 中 由 一 个 函数 表达 式 定 义 
var sound = "Quack"; | vy 办 此 其 作用 域 为 整 个 quack 范 数 ; 但 仅 在 这 个 
忆 米 F 主 、 > -一 
var quacker = function() { 加 Wh 志 达 亏 被 执 人 行 后 且 在 到 达 苑 数 quack 末尾 前 ， 
已 才 是 已 定义 的 。 
console.log(sound); 


Dy 


for (var i = 0; i < num; i++) { 


4 quacker 仅 在 这 个 范 
quacker (); 转 内 是 已 定义 的 。 


} 
if (migrating) { 


世上 泡 有 
quack (4); 昂 和 项 的 问题 
fly (4) 





人 o] ;将 一 个 函数 传递 给 另 一 个 函数 时 ， 这 
个 函数 将 存储 在 一 个 形 参 中 ， 进 而 被 视 为 所 
请 注意 ， 在 函数 内 部 的 什么 地 方 可 引用 嵌 套 函数 的 规则 ， 与 调用 函数 的 一 个 局 部 变量 。 这 样 理解 对 吗 ? 
在 整个 代码 的 什么 地 方 可 引用 会 局 函数 的 规则 相同 。 也 就 是 a 
说 ， 在 函数 内 部 ， 如 果 你 使 用 函数 声明 创建 了 一 个 全 套 函 数 ， 


一 个 函数 时 ， 传 入 的 函数 引用 将 被 复制 到 所 
那么 在 这 个 函数 的 函数 体 的 任何 地 方 ， 骸 套 函 数 都 症 已 定义 调用 函数 的 一 个 形 参 变量 中 。 与 其 他 形 参 一 





的 ， 如 果 你 使 用 函数 表达 式 创建 了 一 个 媒 套 函数 ， 则 在 这 个 祥 ， 存 储 函 数 引用 的 形 参 也 是 局 部 变量 ， 
函数 的 函数 体内 ， 仅 当 函 数 表达 式 执行 后 ， 巾 套 函 数 才 是 已 
定义 的 。 
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Se © db | lS 
峻 的 JavaScript 挑 战 
ee I ee 听 说 你 就 是 ! 我 们 被 下 面 两 个 代码 厂 段 难 住 了 ， 需 要 你 
的 帮助 。 在 我 们 看 来 ， 两 段 代 码 几 乎 完全 相同 ， 只 是 其 中 一 段 使 用 了 一 个 一 等 国 数 ， 而 另 一 
段 没 有 。 Www 内 ， AA 吉 果 为 008， 而 代码 片段 机 的 
结果 为 007。 但 实际 上 ， 它 们 的 结果 都 是 0081 你 能 帮 我 们 和 弄 明 白 为 什么 会 这 样 吗 ? 














9 代码 片段 #1 





党 
过 入 让 -一 一 "ar secret = = "007"; 
eA 9 Lo -8 wp 
NWES 人 a 
/ 飞 梁 7 使 fan ee 
人 看 赤 记 NA [= ctiongetsecretO 二 re 
y a Secret= "008"， as 
om _ function ge getValuer- O { Se no A es 
} return secret;— i ee 
pe return n getValue 1eO; ss 一 一 oe 
几 一 一 二 > pe 
代码 片段 #2 RS 
var secret = ~ "007";_ eoret OO _ 
ee Te = 
function BetSecret Os { 一 一 
ep ，“ | Rd ee 
runction getValne a 
Ve return Ss° secre 全 a Te 
i i 
l gue 
return getVal 》 一 一 一 
-一 一 一 a getsecretOi 一 一 一 


var getValue 
~ getValuePun OO) | i 


PIPE 


现在 不 要 查看 本 章 末 尾 的 答案 ， 
稍 后 我 们 将 重 这 这 文 个 挑战 。 
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词法 作用 域 
只 需 查看 代码 的 结构 就 


-上 (lexical) 意味 着 0 
洞 法 作 膨 域 简介 。 “号 2 人 oem mT 


可 确定 受 
时 才 明 自 。 
既然 说 到 作用 域 ， 下 面 来 和 浴 单 地 介绍 一 下 词法 作用 域 的 工 
作 原 理 ， 这 里 定义 了 一 个 名 为 


justAVar 的 全 局 变量 ， 
var JustAVar = "Oh, don't you worry about it, I'm GLOBAL"; 
< 一 这 个 函数 定义 了 一 个 新 的 
function whereAreYou() { 词法 作用 域 ……: 
var JustAVar = "Just an every day LOCAL"; 


其 中 有 一 个 局 部 变量 justAVar， 


returnCjustAVar’) 它 遮 住 了 同名 的 全 局 变量 。 


~ 这 个 遂 数 被 调用 时 返回 justAYar， 不 过 是 哪个 justAYar 呢 ?我 们 使 
var result = whereAreYou!(); 用 的 是 词法 作用 域 ， 因 此 在 最 近 的 函数 作用 域内 查找 justAVar; 如 
console.log(result); ~ 果 在 这 个 作用 域内 设 有 找到 ， 再 在 全 局 作用 域内 查找 。 


， JavaScript 控 制 合 
人 ， 调 用 whereAreYou 时 ， 它 ee dav LOCAL 
将 返回 局 部 变量 justAVar (而 未 ust an every day 
不全 局 变量 justAVar) 的 什 , 





下 面 来 引入 一 个 其 套 函 数 。 


var JustAVar = "Oh, don't you worry about it, I'm GLOBAL"; 
wy 人 台数 二 疝 = 
function whereAreYou() { 所 这 个 通 数 与 前 面相 同 。 


var JustAVar = "Just an every day LOCAL"; 人 加 加 
] Y oY 全、 这 个 局 部 变量 让 住 了 同 


名 的 全 局 变量 。 
Se ?D2SE0 《但 现在 定义 了 一 个 嵌 套 范 数 ， 并 在 其 中 引用 了 
return(justAVay justAVar。 这 引用 的 是 哪个 变量 呢 ?” 同 样 ， 引 
} 用 的 总 是 最 近 的 外 部 函数 中 的 变量 。 因 此 ， 这 
里 引用 的 变量 与 前 面相 同 。 
return inner(); < 
} 注意 到 这 里 调用 了 inner， 
并 育 回 其 结果 。 
和 < 一 因此 调用 whereAreYou 时 ， 将 调 javagcript 控 制 台 


用 函数 inner， 进 而 育 回 局 部 变 
量 justAVar (而 不 是 全 局 变量 
justAVar) 的 值 。 


Just an every day LOCAL 


console.log(result); 
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沁 法 作用 域 的 有 趣 之 处 
下 面 再 来 作 一 点 调整 ， 请 瞪 大 眼睛 ， 人 情况 将 发 生 翻天 履 地 的 变化 。 


var JustAVar = "Oh, don't you worry about it, I'm GLOBAL' : 


function whereAreYou() { 


0 变量 


var JustAVar = "Just an every day LOCAL"; : 变化 ， 变 重 还 是 原 
来 的 变 重 ， 逊 数 还 是 原来 的 
又 米 / 

function inner() { 有 邓 数 。 


return JjJustAVar; 


但 这 里 没有 调用 函数 inner， 而 是 


2 er 诊 ©) 它 o 
return inner; 一 一 一 一 


var result = innerFunction(); 数 inner 的 引用 。 我 们 将 这 个 函数 5| 用 赋 给 变 
SS De 鲁 innerFunction， 有 再 调用 innerFunction， 将 其 


console.log(result); 癌 。 、 ©. 
结果 赋 给 变量 result， 并 打印 这 个 变量 。 


那么 议 里 通过 innerFunction 调 用 inner 时 ， 
将 返回 哪个 justAVar 变 量 呢 ?” 局 部 变量 
justAVar 还 是 全 局 变量 justAVar? 












重要 的 是 调用 了 芒 数 的 时 机 。 我 们 调用 返回 
的 咏 数 jnner 叶 ， 全 局 变量 justAVar 在 作用 
域内 ， 因 此 结果 为 “0h don'+ worry abovt it, 

Tm GLOBAL” 。 








别 这 么 快 下 结论 。 在 词法 作用 城 中， 重要 的 
是 鳃 数 是 在 什么 地 方 定 义 的 ， 因 此 结果 此 

定 是 局 部 变量 justAVar 的 值 ， 即 “Just an 
every day LOCAL” 。 
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赵 着 这 些 家 伙 打 得 不 可 开交 
之 时 ， 我 打开 JavaScript 语 言 参 考 手 

册 ， 发 现 我 们 好 像 是 对 的 。 上 述 代码 的 
输出 为 “Justan every day LOCAL”， 



















Frank: 你 赁 什么 说 你 是 对 的 ? 这 有 悖 于 物理 定律 。 局 部 变量 根本 就 不 存在 了 变量 
便 不 再 存在 了 。 它 消失 (derezzed) 了 1! 你 难道 没 看 过 电影 《 创 : 战 纪 》 (TRON) 吗 ? 

Judy: 在 不 那么 强大 的 C++ 和 Java 语 言 中 也 许 如 此 ， 但 在 JavaScript 中 不 是 这 样 的 。 

Jim: 别 好 了 ， 这 怎么 可 能 ?了 孙 数 whnereAreYou 来 去 匆匆 ， 局 部 变量 justAVar 已 不 复 存在 。 

Judy: 我 刚才 不 是 跟 你 说 了 嘛 ， 在 JavaScript 中 ， 局 部 变量 不 是 这 样 的 。 

Frank: Judy， 你 说 说 是 什么 样 的 。 

Judy: 定义 函数 ijnner 时 ， 局 部 变量 justAVar 在 这 个 函数 的 作用 域内 。 不 过 词法 作用 域 指出 ， 重 要 的 是 定义 的 
方式 ， 既然 我 们 使 用 的 是 词法 作用 域 ， 那 么 每 当 inner 被 调用 时 ， 它 都 认为 这 个 局 部 变量 还 存在 ， 需 要 时 可 直 
接 使 用 。 

Frank: 可 是 我 前 面 说 过 ， 这 看 起 来 有 悖 于 物理 定律 。 定 义 局 部 变量 justaAvVatr 的 国 数 whereAreYou 已 执行 完 
毕 ， 这 个 变量 已 不 复 存 在 。 


Judy: 没 错 ， 尔 数 whereAreYou 已 执行 完毕 ,但 其 作用 域 依然 存在 ， 可 供 ijnner 使 用 。 











邮 效 了 衬衫 呢 ? | 
Judy: 咱们 来 看 看 定义 并 返回 函数 时 发 生 的 情况 吧 。 怎么 就 换 了 衬衫 哗 
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再 次 曲 数 


实在 抱 莱 ， 到 现在 我 们 还 没有 将 有 关 函 数 的 一 切 和 盘 托 出 。 即 便 在 你 问 及 “ 函 
数 引用 指向 的 到 底 是 什么 ”时 ， 我 们 也 有 点 回避 问题 ， 说 “将 其 视 为 封装 好 的 
函数 ， 其 中 包含 函数 的 代码 块 就 好 了 ”。 


现在 该 将 一 切 都 告诉 你 了 。 








为 此 ， 了 明 们 从 国 数 whereRAreYou 着 手 ， 看 看 执行 这 些 代 码 时 实际 发 生 的 情 ; 


我 们 首先 遇 到 了 局 部 变量 justAvVar， 
并 将 字符 串 "Joust an every day 


LOCRAL" 赋 给 了 这 个 变量 。 
function whereAreYou() { 


所 有 的 局 部 变量 都 存储 在 一 个 环境 
va justAVar = "Just an every day LOCAL"; (environment) 中 ， 这 一 点 我 们 以 
前 没有 提 及 。 
function inner() { 
return JjJustAVar; 


) © 接 下 来 ， 我 们 创建 一 个 名 
inner 的 函数 ，。 "just an... Bear' 


justAVar = 






return inner; 





f \ 这 就 是 环境 ， 它 存储 了 在 局 部 作用 域 
内 定 


义 的 所 有 变量 
文 个 
最 后 ， 当 我 们 返回 这 个 函数 环境 中 只 有 一 
时 ， 返 回 的 不 仅仅 是 函数 ， 妥 量 iuetAVar。 


还 有 与 之 相关 联 的 环境 。 


个 函数 都 有 与 之 相关 联 的 环境 ， 其 9 
咕 一 
性 


含 它 所 处 作用 域内 的 局 部 变 重 。 ，) 


justAVar = 


每 
包 


function inner() { 


return justAVar; 


"Just an... BOEAL" 





下 面 来 看 看 调用 函数 inner 
时 ， 如 何 使 用 其 环境 。 
(> 
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理 谈 唔 数 调 用 
有 了 图 数 innez 及 其 环境 后 ， 我 们 来 调用 图 数 inner， 看 看 将 发 生 的 情 ; 
我 们 要 执行 的 代码 如 下 。 


Var innerFunction = whereAreYou(); 
Var result = innerFunction(); 


console.log(result); 


首先 ， 我 们 调用 whereAreYou。 我 们 知道 ， 这 将 返回 一 个 函数 引用 ， 因 此 我 们 
创建 变量 innerFunction， 并 将 返回 的 函数 引用 赋 给 它 。 别 忘 了 ， 有 一 个 环境 
与 这 个 函数 相关 联 。 


]JustAVaL = 





function inner() { 


' Just an 
return justAVar; 


Var innerFunction = whereAreYou(); 





这 条 语句 执行 完毕 后 ， 我 们 就 有 了 变量 
innerFunction， 它 指向 whereAreYou 退 名 


的 函数 (及 其 环境 ) 。 





范 数 及 其 环境 。 


X 寺 


我 们 的 新 变 


(2) 接 下 来 ， 我 们 调用 innerFunction。 这 将 在 相应 的 环境 中 执行 它 指向 的 函数 的 
代码 ， 如 下 所 示 。 







justAVar = 


Var result = innerFunction(); function inner() { 


"Just an... 
return JustAVar; 


justAVar 的 值 为 “ Just 





an every day so 
一 人 、 有 及 议 个 
这 个 函数 只 有 一 条 返回 justAVar 的 语句 。 为 J 


获取 justAVar 的 值 ， 我 们 在 环境 中 查找 。 
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S 
‘Yr” 
G) 最 后 ， 我 们 将 这 个 函数 的 结果 赋 给 变量 result， 再 在 控制 台中 显示 这 个 9 
变量 。 发 
oO 
人 
~ 
x 
var result = innerFunction(); 心 
AP 
console.log(result); 二 epunctioni 回 从 相应 的 环境 中 获取 又 / 
值 “Just an every day LOCAL 9 因此 我 们 将 esult 
这 个 字符 串 存储 到 变量 result 中 。 | 


「 


接 下 来 ， 我 们 只 需 在 控制 台中 
显示 这 个 字符 串 即 可 。 


= javaScript 控 制 台 


Just an every day LOCAL 








可 悉 ! Judy 又 说 
对 了 。 








等 等 ，J 届 dy 没有 提 到 闭 包 ， 而 我 们 
入 里 做 的 好 像 与 闭 包 相关 。 咱 们 

来 学 习 闭 包 ， 看 看 能 否 利 册 闭 包 来 
战胜 她 。 









,| 









估计 们 ,这 就 是 闭 包 ， 
最 好 仔细 地 研究 一 下 。 
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关于 词法 作用 域 的 问题 


有 ; 你 说 词法 作用 域 决定 了 变量 是 在 哪里 定义 的 ， 这 是 
什么 意思 ? 

A 

喉 ”， 所 谓词 法 作用 域 ， 指 的 是 JavaScript 的 作用 域 规则 完 
全 基于 代码 的 结构 ， 而 不 是 一 些 动态 的 运行 阶段 属性 。 这 
意味 着 只 需 查看 代码 的 结构 ， 就 能 确定 变量 是 在 什么 地 方 
定义 的 。 另 外 别 忘 了 ， 在 JavaScript 中 ， 只 有 有 阵 数 会 引入 新 
的 作用 域 。 因 此 ， 对 于 在 函数 中 引用 的 变量 ， 要 确定 它 是 
在 哪里 定义 的 ， 可 从 最 里 面 (当前 涵 数 ) 开始 依次 向 最 外 
面 进行 查找 ， 直 到 找到 它 为 止 。 如 果 在 这 些 函 数 中 部 找 不 
到 它 ， 则 它 要 么 是 全 局 的 ， 要 么 未 定义 ， 


y 

人 o) ;在 函数 被 符 套 很 多 层 的 情况 下 ， 环 境 的 工作 原理 是 
什么 呢 ? 

AAA ， 

份 ， 前 面 解释 环境 时 ， 简 化 了 环境 的 表示 ， 实 际 上 ， 你 
可 以 认为 每 个 谋 套 函数 都 有 自己 的 小 环境 ,其 中 包含 它 自 
己 的 变量 。 这 样 将 形成 一 个 环境 链 ， 从 内 到 外 依次 为 各 个 
庶 奏 函数 的 环境 。 

因此 ， 在 环境 中 查找 变量 时 ， 你 将 从 最 近 的 环境 着 手 ， 治 
环境 链 不 断 往 下 查找 ， 直 到 找到 变量 为 止 。 如 果 在 环境 链 
中 没有 找到 ， 再 在 全 局 环境 中 查找 。 


人 o] ;为何 说 词法 作用 域 和 函数 环境 是 好 东西 ”我 原本 以 
为 前 述 示例 代码 的 结果 为 “Oh，don't you worry about it， 
Im GLOBAL ”。 在 我 看 来 ， 这 更 合乎 情理 。 正 确 的 答案 令 
人 迷惑 ， 也 有 迟 于 直 帝 。 


A 

喉 ， 我 们 明 自 你 为 何 这 么 想 ， 但 词法 作用 域 的 优点 是 ， 
总 是 可 以 通过 查看 代码 来 确定 变量 是 在 哪里 定义 的 ， 进 而 
确定 它 的 值 。 正 如 你 看 到 的 ， 即 便 在 你 返回 函数 并 过 后 在 
定义 函数 的 作用 域外 面 调 用 它 时 ， 情 况 亦 如 此 。 

词法 作用 域 和 函数 环境 是 好 东西 的 另 一 个 原因 是 ， 使 用 这 
种 功能 可 做 很 多 事情 ， 稍 后 进行 介绍 。 


2 
上 O) ; 形 参 变 量 是 否 也 包含 在 环境 中 


8 
和 ”。， 吓 的 。 前面 说 过 ， 可 将 形 参 视 为 面 数 的 局 部 变量 ， 
因此 它们 也 包含 在 环境 中 。 


y 
[9) s 我 需要 详细 了 解 环境 的 工作 原理 吗 ? 
A 
合 ' s 不 需要 。 你 只 需 明 白 有 关 JavaScript 变 量 的 词法 作 


用 域 规则 即 可 ， 我 们 在 前 面 已 经 介绍 过 。 你 现在 已 经 知道 ， 
从 函数 返回 的 函数 携带 了 其 周边 环境 。 


曾 耕 了，JavaScript 沪 次 都 是 在 完 关 它 的 环 烧 中 
执行 的 。 在 岛 效 中 ， 爱 确 征 吏 量 洲 自 何方 ， 可 
接 认 内 到 外 的 顺 夺 信 次 在 包 字 它 的 访 次 中 和 搜索， 
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财 包 到 底 是 什么 


人 人 都 在 谈论 闭 包 (closure) ， 认 为 它 是 必 不 可 少 的 语言 特性 ， 但 有 多 少 人 真正 明白 闭 
包 是 什么 以 及 如 何 使 用 它们 呢 ? 少 之 又 少 。 闭 包 是 人 人 都 想 理解 的 语言 特性 ， 也 是 所 有 
传统 语言 都 想 添加 的 语言 特性 。 


闭 包 很 难 学 ， 业 界 很 多 受过 良好 教育 的 人 都 这 样 说 ， 但 对 本 书 的 读者 来 说 ， 这 根本 就 不 
是 问题 。 想 知道 为 什么 ? 不 是 因为 本 书 通俗 易 懂 ， 也 不 是 因为 我 们 要 创建 一 个 杀手 级 应 
用 程序 来 向 你 介绍 闭 包 ， 而 是 因为 你 时 就 学 习 过 了 ， 只 是 那 时 我 们 没有 称 之 为 闲 包 而 已 。 


0 ER 如 果 你 已 深 受 本 书 的 影响 ， 此 时 
闲话 少 说 ， 给 闲 包 一 个 非常 正式 的 定义 吧 。 2 此 刻 你 可 能 这 样 想 ， 这 是 一 个 会 


让 我 的 新 水 大 幅 提升 的 知识 点 。 








闭 包 : 名 词 ， 指 的 是 函数 和 引用 环境 。 





必须 承认 ， 上 述 定义 并 不 能 让 人 茅 塞 顿 开 。 为 何 称 之 为 团 包 呢 ?” 价 单 地 说 ， 因 为 它 可 能 
征 一 道 决 定 成 败 的 面试 题 ， 也 可 能 在 未 来 的 天 个 时 候 让 你 获得 加 薪 一 一 我 一 点 都 设 开 玩 
> 


要 理解 闭 包 一 词 ， 需 要 明白 “敲定 ” (close) 函数 的 概念 。 


A 
SR 降 笔 上 阵 
你 的 任务 有 以 下 两 个 。 (1) 在 下 面 的 代码 中 ， 找 出 所 有 的 自由 变量 ， 并 将 它们 圈 出 来 。 自 由 


变量 指 的 是 不 是 在 本 地 作用 域内 定义 的 变量 。 (2) 从 右边 选择 一 个 可 敲定 这 个 函数 的 环境 。 
可 裔 定 函 数 的 环境 指 的 是 给 所 有 自由 变量 都 提供 了 值 的 环境 。 








beingFunny = true; 


function JjJustSayin(phrase) { 





var ending = ""; notSoMuch = false; 
if (beingFunny) { inConversationWith = "Paul' 
ending = " -- I'm just sayin!"; 
} else if (notSoMuch) { 
ending = " -- Not so much."; 


beingFunny = true; 
} 
alert(phrase + ending); 


justSayin = false; 


oocoder = true; 





| 】 notSoMuch t 
= true; 
将 议 些 代码 中 的 所 有 和 目 由 变量 选 对 一 个 能 够 将 这 个 豫 phrase = "Do do da"; 
ed TT 皇 . ~ 是 | 
都 图 出 来 。 目 由 变 鲁 不 是 在 本 数 敲定 的 环境 。 band = "Police"; 


地 作用 域内 定义 的 变 重 。 
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Ly A 六 
剖 尔 号 数 
通过 前 面 的 练习 ， 你 可 能 明白 了 ， 国 数 通常 包含 局 部 变量 (它们 
是 在 国 数 体 中 定义 的 ， 人 
0 称 为 自由 变量 。 自 由 一 词 源 于 这 样 一 








: 在 国 数 体内 ， 目 由 变量 信 有 绑 定 到 任何 值 ( 换 而 言 之 ,它们 


es 有 了 给 每 个 自由 变量 都 提供 了 值 的 环境 后 ， 
便 将 国 数 融 定 了 ;而 函数 和 环境 一 起 被 称 为 闭 包 。 







对 于 芒 数 体内 的 变 es 
不 是 在 本 地 定义 的 ， 全 局 变 
便 可 肖 尔 饭 来 自 包 含 史前 本 数 的 其 他 
镶 数 ， 可 从 环境 中 获取 其 值 。 







beingFunny = true; 











notSoMuch = false; 


// 函数 的 代码 





inConversationWith = "Paul"; 


包含 自 由 次 量 的 色 妆 与 为 所 有 意 
毕 自 由 交 旺 交 供 子 严 量 绵 定 的 六 
境 一 起 ， 被 狐 为 六 包 ， 






你 已 经 花 7 了 将近 10 页 的 篇 幅 探 讨 这 个 主题 ， 
还 打 不 打算 介绍 实用 的 JavaScript 代 码 呀 ? 换 
外 话说， 你 要 没完 没 了 地 介绍 理论 吗 ? 我 于 
嘛 要 关心 芒 数 的 这 些 底 层 工 作 原 理 ? 我 只 要 
能 够 编写 着 调用 品 数 不 就 成 了 咀 ? 









要 不 是 闭 包 这 么 有 用 ， 我 完全 同意 你 的 看 法 。 很 抱歉 强行 让 你 
去 学 习 闭 包 ， 不 过 我 向 你 保证 ， 这 样 做 非常 值得 。 你 知道 ， 闭 包 
绝 非 理 论 性 的 函数 式 编程 语言 结构 ， 而 是 一 蒜 极 其 强大 的 编程 
工具 。 现 在 你 明白 了 闭 包 的 工作 原理 〈 守 不 夸张 地 说 ， 明 和 白 闭 包 
绝对 会 让 你 在 经 理 和 同事 面前 脱颖而出 ) ， 该 学 习 如 何 使 用 它们 
了 。 

现实 情况 是 ， 团 包 无 处 不 在 ， 事实 上 ， 你 将 对 它们 了 如 指 掌 ， 进 
而 在 代码 中 大 量 地 使 用 它们 。 下 面 来 介绍 一 些 闭 包 示 例 ， 帮 助 你 
明白 前 面 讲述 的 所 有 内 容 。 
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用 闭 包 实现 计数 器 


使 同 闭 包 笑 现 物 夺 的 计数 器 


有 过 实现 计数 各 国 数 的 念头 吗 ? 通 前 以 类 似 于 下 面 的 方式 来 实现 : 





从 会 局 变量 
var _ count = 0; EC 一 声明 一 1 全 局 芝 重 count。 


function counter() { 每 次 调用 counter 时 ， 都 将 全 局 变量 
count = count + 1; count 加 1， 再 返回 结果 。 


return Count: 


可 以 像 下 面 这 样 使 用 这 个 countez 国 数 


JavaScript 控 制 合 


因此 可 以 像 这 样 计 


console.log(counter()); 数 并 显示 计数 器 
console.log(counter()); 的 值 。 


console.log(counter()); 











这 种 做 法 存在 的 唯一 问题 是 ， 使 用 全 局 变量 count， 协 作 开 发 代码 时 ， 大 家 第 
前 会 使 用 相同 的 变量 名 ， 进 而 导致 冲突 。 

这 里 要 告诉 你 的 征 ， 可 以 使 用 受 保护 的 局 部 变量 实现 计数 工 。 这 样 ， 计 数 答 将 
不 会 与 任何 代码 发 生 冲 突 ， 且 只 能 通过 调用 相应 的 国 数 (也 叫 闭 包 ) 来 增加 计 
数 禹 的 值 。 

要 使 用 闭 包 实现 这 种 计数 姻 ， 可 重用 前 面 的 大 部 分 代码 。 别 上 用 上 腿 ， 奇 迹 就 要 发 
生 了 : 





直上 时 
我 们 在 函数 makeCounter 中 声明 eon 
这 样 它 有 变量 是 全 局 受 重 。 
ee WA 议 样 它 就 是 局 部 变量 ， 和 而 不 乞 


Var count = 0; 


function counter() { 接 下 来 ， 我 们 创建 函数 
Count = count + 工 ; counter,， 它 将 变量 count 加 1。 
return count.; 


} 
return counter:; <a ” 然后 》 退回 函数 counter。 


} 
人 这 是 一 个 闭 包 ， 在 其 环境 中 存储 了 变量 count。 
这 种 办 法 管用 吗 ? 咀 们 来 试 一 试 。 
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浏 应 神 疹 的 计 效 器 
添加 一 些 测 试 计数 如 的 代码 ， 再 试 一 试 | 


function makeCounter() { 
var count = 0; 


function counter() 1 
Count = count + 工 ; 
return count.; 


} 


return counter; 





} 


Var doCount = makeCounter(); 
console.log(doCount()); 
console.log(doCount()); 
console.log(doCount()); 


揭秘 


下 面 来 分 步 谢 析 这 些 代码 ， 看 看 这 个 计数 秋 征 如 何 工 作 的 。 


> 


个 计数 器 确实 上 管用， 计 


这 
数 结果 准确 无 误 。 


ott 


bd 















function counter() { 










Ccount = count + 1; 


| Var count = 0; | 


return count; 






【1) 我 们 调用 makeCounter， 它 创建 函数 counter， 
并 将 其 与 包含 自由 变量 count 的 环境 一 起 
返回 。 换 句 话 说 ， 它 创建 了 一 个 闭 包 。 从 


makeCounter 返 回 的 函数 存储 在 doCount 中 。 l 
function makeCounter() { 


a 四 E Var count = 0; 
© 我 们 调用 函数 doCount， 这 将 执行 函数 counter 
的 函数 体 。 


function counter() { 
count = count + 1; 

@》 如 到 变量 =onnt 时 ， 我 们 在 环境 中 查找 并 获取 3 
它 的 值 。 我 们 将 count 的 值 加 1， 将 结果 存 回 到 } 
环境 中 ， 再 将 结果 返回 到 调用 aoCcount 的 地 方 。 


已 
XX 十 一 个 


闭 包 。 
return counter; 
} 


i var doCount = makeCounter(); 
人 每 次 调用 aocount 时 ， 我 们 者 重复 第 2~3 步 0 0 
© console.log(doCount()); 


console.log(doCount()); 


© | 
调用 doCount (指向 函数 counter 的 引用 ) ， 进 p> ed console.1log(doCount()); 


而 需要 获取 count 的 值 时 ， 我 们 使 用 这 个 闭 包 的 环境 中 


的 变量 count。 在 外 部 世界 (全 局 作用 域 中 ) ， 根 本 
看 不 到 变量 count， 但 每 次 调用 doCount 时 ， 我 们 都 可 
以 使 用 它 。 陈 了 调用 doCount 外 ， 漫 有 其 他 任何 办 法 
能 够 获取 count。 


调用 makeCounter 
时 ， 我 们 获得 的 是 一 
个 闭 包 : 一 个 函数 及 
其 环境 。 
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闭 包 的 练习 





轮 到 你 了 。 请 尝试 创建 下 面 的 闭 包 。 我 们 知道 这 对 初学 者 来 说 不 容易 ， 必 要 时 请 参阅 本 章 
.2¢ 本 未 尾 的 答案 。 重 要 的 是 不 断 地 思考 这 些 示例 ， 直 到 完全 明白 为 止 。 
: 红 习 ; 


第 一 题 (10 分 ) 
makePassword 将 实际 密码 作为 参数 ， 它 返回 一 个 这 样 的 函数 : 将 猜测 的 密码 作为 参数 ， 
并 在 猜测 的 密码 与 实际 密码 相同 时 返回 true。 (对 于 这 些 有 关闭 包 的 描述 ， 可 能 需要 读 
几 遍 才能 明白 。 ) 


function makePassword(Password) { 
return { 


return (passwordGuess === password); 


第 二 题 (20 分 ) 
函数 mulLtN 将 一 个 数字 (n) 作为 参数 ， 并 返回 一 个 这 样 的 函数 : 将 一 个 数字 作为 参数 ， 
并 返回 它 与 n 的 乘积 。 

function multN(n) { 


return { 


return > 


第 三 题 (30 分 ) 

修改 前 面 的 计数 器 ， 让 ma keCounter 与 以 前 一 样 不 接受 任何 参数 ， 但 使 其 定义 变量 
count， 表 创建 并 返回 一 个 对 象 。 这 个 对 象 包 含 一 个 方法 ijncrement， 它 将 变量 count 
加 1， 再 返回 这 个 变量 。 


匿名 函数 、 作 用 域 和 闭 包 


记过 将 印 数 表达 趟 周作 笑 参 来 创 
建 财 包 


并 非 只 能 通过 从 函数 返回 函数 来 创建 哮 包 。 如 过 函数 使 用 了 自由 变量 ， 则 
每 当 你 在 创建 该 函数 的 上 下 文 外 面 执行 它 时 ， 都 将 创建 一 个 闭 包 。 

将 函数 传递 给 函数 时 ， 也 将 创建 闭 包 。 在 这 种 情况 下 ,传递 的 函数 将 在 完 
全 不 同 于 定义 它 的 上 下 文中 执行 。 下 面 是 一 个 这 样 的 示例 。 





function makeTimer(doneMessage, n) { 
我 们 定义 了 一 个 函数 。 
ee 由 变 
alert(doneMessage); 它 使 用 了 一 个 目 白 < 
}, n); 我 们 将 它 用 作 setTimeout 的 处 理 程 序 。 


个 通 数 将 在 函数 makeTimer 调用 完毕 1O000 襄 
『 秒 后 执行 。 


makeTimer("Cookies are done!", 1000); 


这 里 回国 数 setTimeout 传 人 了 一 个 国 数 表 达 式 ， 而 这 个 函数 表达 式 使 用 了 上 自 
由 变 doneMessade, 你 知道 ， 函 数 表达 式 的 结果 是 一 个 函数 3 用， 而 该 冰 数 
引用 将 被 传递 给 setTimeout。 方 法 setTimeout 存 储 该 冰 数 引用 (这 是 一 个 

图 数 及 其 环境 ， 即 闭 包 ) ， 并 在 1000 毫 秒 后 调用 它 。 


再 说 一 壳 ， 我 们 传递 给 setTimeout 的 函数 是 一 个 团 包 ， 因 为 它 带 有 将 自由 变 
量 qdoneMessage 绑 定 到 字 符 串 ' 'Cookies are Qone 上 有 的 环境 。 


如 宇 信 闻 辣 国 AN 作 function handler() { 


alert(doneMessage); 














,pd 2 
ge 


对 于 第 9 章 中 第 412 页 的 代码 ， 
你 能 使 用 闭 包 对 其 进行 修改 ， 


















J 这 样 ， 结 } 避免 疝 setTimeout 传 递 第 
将 如 何 ? function makeTimer(doneMessage, n) { 三 个 参数 吗 ? 








setTimeout(handler, n); 






} 


makeTimer("Cookies are done!'", 






1000); 
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闭 包 包含 环境 


闭 包 包含 的 是 锋 际 环境 ,而 非 环境 的 副本 
前 错 


学 习 闭 包 时 ， 大 家 第 第 错误 地 认为 团 包 的 环境 包 伟 所 有 变量 及 其 值 的 副本 。 实 际 上 不 古 这 样 
的 。 环 境 引 用 的 是 实时 变量 ， 因 此 ， 如 采 闭 包 国 数 外 面 的 代码 修改 了 变量 ， 闭 包 国 数 执行 时 
看 到 的 将 是 变量 的 新 值 。 


为 明日 这 一 点 ， 下 面 来 修改 前 面 的 示例 。 
function setTimer(doneMessage, n) { 


setTimeout(function() { 入 一 在 这 里 创建 了 闭 包 。 


alert(doneMessage); 


上 了 ) 调 用 setTimeout 后 再 修 改 


4 一 doneMessage 的 值 。 


doneMessage = "OUCH'"; 
} 


setTimer("Cookies are done!", 1000); 


调用 setTimeout 并 癌 它 传递 一 个 函数 表达 式 时 ， 首 
将 创建 一 个 闭 包 ， 其 中 包含 相应 的 函数 以 及 指向 ' var GE: 


环境 的 5 | 用 o rt (doneMeee "Cookies are done!" 


setTimeout(function() { 





alert(doneMessage); 


}, n); 


@ 接 下 来 ， 我 们 在 闭 包 外 面 将 doneMessage 的 值 | 
改 为 "COUCH!"。 在 闭 包 使 用 的 环境 中 ， 这 个 变量 | a 
的 值 也 发 生 了 变化 。 


alert(doneMessage "OUCHI" 





doneMessage = "OUCH!",; 


3 1000 宫 秒 后 ， 闭 包 中 的 函数 被 调用 。 这 个 函数 引 
用 变量 ? 


它 使 用 环境 中 变量 doneMes55a9 


设置 成 了 "OUCH!"， 因 此 提示 框 中 显示 的 是 "OUCH!"。 , 
中 给 这 个 变量 设 置 的 新 值 。 


这 个 函数 被 调用 时 ， 
的 值 ， 即 在 setTimAer 


function() { alert(doneMessage); } 
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使 周 事 件 处 理 程序 来 创建 闭 包 


来 看 男 一 种 创建 闭 包 的 方式 : 使 用 事件 处 理 程序 来 创建 闭 包 。 这 种 做 法 在 JavaScript 代 码 中 
很 常见 。 我 们 将 首先 创建 一 个 简单 的 网 页 ， 它 包含 一 个 按钮 和 一 个 显示 消息 的 <div> 元 素 。 
我 们 将 跟踪 用 户 单 击 按 钮 的 次 数 ， 并 在 <div> 元 素 中 显示 出 来 。 


下 面 是 用 于 创建 该 网 页 的 HTML 和 一 些 CSS。 请 新 建 一 个 文件 ， 将 其 命名 为 divClosure.html， 
并 在 其 中 输入 这 些 代 码 。 








<Idoctype html> 典型 的 简单 网 页 。 

<html lang="en"> 

<head> 

<meta charset="utf-8"> 

<title>Click me'</title> 

wotyley ya 一 些 设置 网 页 元 率 样 式 的 C55。 


body, button { margin: lOpx; } 
div { padding: 1l0Opx; } 


</style> 
<script> 人 一 一 将 在 议 里 添加 我 们 的 代码 。 

// 在 这 里 添加 JavaScript 代 人 码 
</script> 
</head> 这 个 页 由 有 一 个 捧 钥 和 一 个 显示 消息 的 <divz 天 束 
<body> ”用户 单 击 按钮 时 ， 并 们 都 将 更 新 <div> 元 素 显示 的 滴 息 。 


<button id="clickme">Click Po 
<div id="message"></div> 

</body> 

</html> 























ce 
人 


1 ' 
i 


人 机 | 门 localhost/~BethyHFI 











效果 :每 当 LClick mel] 
这 就 是 我 们 要 实现 的 效率 : 鲜 


用 户 单 击 按钮 时 ，<div> 元 素 显 不 le “Ww 
的 消息 都 将 更 新 ， 以 指出 用 户 音 | 
击 按钮 的 次 数 。 





下 面 来 编写 JavaScript 代 码 。 你 完全 可 以 不 使 用 朵 包 ， 但 正如 你 将 看 到 的 ， 通 过 使 用 
闭 包 ， 代 码 将 更 简洁 ， 其 至 效率 也 更 高 一 些 。 


Ey 


现在 的 位 置 ， 





Se/chapter. 由 oo 3 | 
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使 用 市 有 事件 处 理 程 序 的 闭 包 


不 使 肝 闭 包 


先 来 看 看 在 不 使 用 闭 包 的 情况 下 如 何 实现 这 个 示例 。 





、 E ; 名 其 作为 handleClick 〈 控 
从 巧 交 变量 count 声明 为 全 局 的 ， 因为 如 果 将 其 a 
7 有 直 事 件 处 理 程序 ， 参见 后 面 的 代码 ) 的 局 部 变量 ， 则 用 记 
0; 每 次 单 击 时 ， 它 都 将 被 初始 化 。 


var count = 


在 加 载 事 件 处 理 程序 中 获取 按钮 元 素 ， 并 
window.onload = function() { 2 通过 其 属 性 onclick 指 定 一 个 单 击 事件 处 
理 程序 。 


Var button = document.getElementByIlId("clickme"); 


button.onclick = handleClick:; 


p> 


function handleClick() I{ 我 们 定义 变 量 message a 


var message = "You clicked me "; > 


va div = document.getElementBylId("message'"); 全 -一 获取 网 页 中 的 <div> 元 素 …… 


一 一 一 将 计数 器 加 1…… 
div.innerHTML = message + count + " times!"; 


并 使 用 指出 用 户 单 击 按钮 次 数 的 消息 更 新 


<div> 元 素 。 
使 用 闭 包 
不 使 用 朵 包 的 版 本 看 起 来 合情合理 ， 只 是 其 中 的 全 局 变量 可 能 会 珊 来 肪 烦 。 下 
面 来 使 用 闭 包 重 写 这 些 人 代码， 看 看 结果 有 何不 同 。 重 写 后 的 代码 如 下 ， 稍 后 我 
们 将 对 其 进行 测试 ， 再 深入 地 探讨 。 


}; 议 是 按钮 的 单 击 事件 处 理 程序 。 


COUn 七 二 十; 














现在 ， 所 有 变量 都 是 在 赋 给 window.onload 的 冲 数 
window.onload = function() { pa 中 定义 的 ， 消 除了 名 称 冲突 的 问题 。 
var count = 0; 
Var message = "You clicked me "; 


Var div = document.getElementById("message"); 
我 们 通过 将 一 个 函数 表达 式 赋 给 控 


钮 的 属性 onclick 来 指定 单 击 处 理 程 
Var button = document.getElementById("clickme"); 、 
9 yId( oe/ 
button.onclick = function() { 中 引用 div、message 和 count。 ( 别 
count++; 筷 了 词法 作用 域 ! ) 
div.innerHTML = message + count + " times!"; 
}; 


}; N 这 个 东 数 有 三 个 目 巾 变量: div、message 和 count。 因 此 将 创建 一 
个 闭 包 。 也 就 是 说 ， 将 把 一 个 闭 包 赋 给 按钮 的 属性 onclick。 


504 第 11 章 


测试 按 摘 单 击 计 次 器 


将 上 述 代码 添加 到 divClosure.html， 并 对 其 进行 测试 吧 。 加 
载 这 个 网 页 ， 再 单 击 按钮 来 增加 计数 右 的 数值 , <div> 元 素 
显示 的 消息 将 更 新 。 再 来 看 一 眼 代 码 ， 确 保 你 完全 明白 其 中 


所 


OO 


匿名 函数 、 作 用 域 和 闭 包 


| | Click mel 


C 会 占 localhost/~Beth/HFJSe/chapter... 区 a 





的 工作 原理 。 然 后 翻 到 下 一 页 ， 我 们 将 详细 探讨 这 些 代码 。 Click me! 


You 


<Idoctype html> 

<html lang="en"> 

<head> 

<meta charset="utf-8"> 

<title>Click me'</title> 

<style> 
body, button { margin: lOpx; } 
Qi { padding: lOpx; } 


</style> 
<script> < 将 d 
window.onload = function() { 
var count = 0; 
Var message = "You clicked me "; 


var div = document.getElementById("message"); 


var button = document.getElementById("clickme"); 
button.onclick = function() { 
count++; 
div.innerHTML = message + count + " times!"; 
}; 
}; 
</script> 
</head> 
<body> 
<button id="clickme">Click me!</button> 
<div id="message"></div> 
</body> 
</html> 


clicked me 10 times! 
( 这 是 我 们 的 测试 效果 。 


ivClosure.html 修 改 成 这 样 。 
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闭 包 的 工作 原理 


周作 搜 锂 单 击 处 理 程序 的 财 包 的 工作 诛 理 


为 理解 这 个 财 包 的 工作 原理 ， 我 们 再 次 跟随 阐 览 堪 ， 看 看 
它 征 如 何 执行 这 些 代码 的 。 











网 页 已 加 载 完 笛 ， 可 以 运行 加 载 事 件 处 理 程序 了 。 
我 需要 定义 一 些 变 量 …… 哦 ， 我 遇 到 了 一 个 铅 数 
人 


人 负数 表达 式 中 ， 别 风 了 三 个 自由 
建 一 个 闭 包 好 了 7。 










表达 式 。 在 这 
创 


haAN 5 伺 
变量 ， 和 还 是 





ba 
4 


@eG DClick me! 





€ SC | localhost/~Beth/HFJSe/chapter... sy al 三 | . 
ee window.onload = function() { 





‘Click mel var count = 0; 





Var message = "You clicked me "™; 


Var div = document.getElementById("message"); 


var button = document.getElementById("clickme"); 
button.onclick = function() { 
count++; 


div.innerHTML = message + count + " times!"; 


上 
} \ 


，| < 又 类 _ 
浏览 器 为 赋 给 属 性 button.onclick 的 还 数 创 | 
个 闭 包 ， 其 中 的 环境 包 合 变量 div、message 




















count。 
R var message = 
Gate 十 "You clicked me "; 
div.innerHTML = ... ar coUre 
var div = [object] 
@ee | Click mel x We wr 
D 9O 各 C 省 | [0 localhost/~Beth/HFJSe/chapter... $e, »| 三 








Click me! 的 属性 onclick。 至 此 ， 加 
和 载 事 件 处 理 程序 就 执行 完毕 7 了， 我 只 


”加 可 事件 处 理 程序 执行 完毕 后 ， 在 
需 静 律 图 户 单 击 达 个 按钮 即 可 。 


用 户 单 击 按钮 Click mel! 前 ， 什 么 都 不 
会 发 生 。 
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用 户 单 击 了 这 个 按钮 ! 该 执 
行 我 前 面 存 储 的 单 击 事件 处 理 





e000 i DD Click mel 








- - 名 处 变量 button 已 不 复 存在 【加载 事件 处 于 
全 Ch D localhost/~Beth/HFJSe/chapter... yr| »| 三 程序 执行 完毕 后 ， 它 就 请 失 了 ) 》 但 按钮 








i = 对 象 还 在 DOM 中 ， 其 属性 onclick 存 储 了 我 们 
| Click mel ney oy 


的 闭 包 。 


地 var message = 
D 7 | "You clicked me "; 
div.innerHTIML = NS 


var count = 0; 







var div = [object] 


我 发 现 有 一 个 闭 包 。 大 好 了 了 ， 
这 意味 着 我 可 以 在 环境 中 查找 
自由 变量 的 值 。 





| var message = 
count++; 


"You clicked me "; 


div.innerHTML = .. 
清 注 意 ， 闭 包 中 的 变量 dv 存储 了 一 个 对 象 。 在 加 部 事件 人 < = 
程序 中 初始 化 div 时 ， 我 们 和 document.gatEon no 中 人 

+ 免 存储 到 了 变量 div 中 ， 因 此 我 们 个 2 
对 象 和 风 、 池 省 了 一 点 计算 时 间 ， 让 代码 的 六 朗 更 快 


Var count = 1; 


var div = [object] 





这 个 闭 包 将 一 直 存 在 ， 直 到 你 
关闭 网 页 为 止 。 它 已 准备 就 绪 ， 
每 当 用 户 单 击 按钮 时 就 会 行动 
起 来 | 


Ww 
D 0 Lee ) 站 chick me 


x 4 













我 已 将 变量 count 加 1， 并 在 环境 中 











ee ee € SC Dlocalhost/~Beth/HFSe/chapter... Sr »| 三 
更 新 了 这 个 变量 的 值 。 我 还 更 新 了 网 
页 显示 的 消息 ， 现 在 要 做 的 就 是 静 候 Click me! | 





用 户 再 次 单 击 。 


You clicked me 1 times! 
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闭 包 的 严峻 挑战 


S»R ,| 2 
BS Ja vac ;pt 挑战 
我 们 需要 一 位 闭 包 专家 ， en 知道 闭 包 的 工作 原理 后 ， 你 现在 明白 下 述 两 个 代码 片段 的 结 


果 都 是 008 的 原因 吗 ? 为 理解 这 一 氮 ， 请 在 下 面 写 出 闭 包 的 环境 中 存储 的 变量 。 请 注意 ， 环 境 完全 可 
以 是 空 的 。 答 案 见 本 章 末 尾 。 


代码 片段 #1 


var secret = "00710 





function getSecret() { 


var secret = "008"， 


function getValue() { 
return secret.; 


} 


return getValue(); 


} 
getSecret(); 


代码 片段 #2 


var secret = "00710 


function getSecret() { 


var secret = "008"， 


function getValue() { 
return secret.; 


} 


return getValue; 





} 
var getValueFun = getSecret(); 


getValueFun(); 
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(@、 谎 名 上 隆 
~ 请 看 下 面 的 代码 


(function(food) { 2 在 需要 使 用 函数 引用 的 地 方 
if (food === "cookies") I 使 用 函数 表达 式 ， 将 代码 简 
alert("More please"); 化 到 极致 。 


} else if (food ee "cake") { 
alert("Yum yum"); 


} 


}) ("cookies"); 


你 的 任务 不 仅 是 明白 这 段 代 码 是 做 什么 的 ， 还 要 明白 它 是 怎么 做 
的 。 为 此 ， 你 需要 进行 还 原 ， 即 将 其 中 的 匿名 函数 提取 出 来 ， 将 
其 赋 给 一 个 变量 ， 再 在 原本 使 用 函数 表达 陈 的 地 方 使 用 这 个 变量 。 
这 样 处 理 后 ， 代 码 是 不 是 更 容易 理解 了 ? 它 到 底 是 做 什么 的 呢 ? 
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匿名 函数 是 没有 名 称 的 函数 表 
JA Ts 

使 用 匿名 函数 可 让 代码 更 简 
~ 士 

函数 声明 创建 的 函数 是 在 执行 
其 他 代码 前 定义 的 。 


函数 表达 式 是 在 运行 阶段 与 其 
他 代码 一 起 执行 的 ， 因 此 在 函 
数 表达 式 所 在 的 语句 执行 前 ， 
已 创 建 的 函数 是 未 定义 的 。 


可 将 函数 表达 式 传递 给 函数 ， 
还 可 从 函数 返回 函数 表达 式 。 


函数 表达 式 的 结果 是 一 个 函数 
引用 ， 因 此 在 可 以 使 用 函数 引 
用 的 任何 地 方 ， 都 可 使 用 函数 
表达 式 。 


其 套 函 数 是 在 其 他 函数 中 定义 
的 函数 。 

与 局 部 变量 一 样 ， 能 套 函 数 的 
作用 域 也 是 局 部 的 。 


词法 作用 域 意味 着 通过 阅读 代 
码 就 能 确定 变量 的 作用 域 。 


在 能 套 函数 中 ， 为 确定 变量 的 
值 ， 将 在 最 近 的 外 部 函数 中 查 
找 ， 如 果 没 有 找到 ， 再 在 全 局 
作用 域 中 查找 。 

闭 包 指 的 是 函数 及 其 引用 的 环 
境 。 

闭 包 捕 获 其 创建 时 所 处 作用 域 
内 的 变量 的 值 。 

自由 变量 指 的 是 在 函数 体内 未 
绑 定 的 变量 。 

在 创建 闭 包 的 上 下 文 外 部 执行 
它 时 ， 自 由 变量 的 值 由 引用 的 
环境 决定 。 

通 单 使 用 闭 包 来 为 事件 处 理 程 
序 捕 获 状 态 。 
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< 二 启 JavaScript 烧 学 游戏 


请 完成 下 面 的 填 字 游 戏 ， 将 本 章 介绍 的 JavaScript 知 识 深 


深 地 刻 在 脑海 中 。 


横 回 

4. 侍 套 在 了 国 数 中 的 国 数 声 明 的 作用 域 。 

6. 在 fly 定 义 前 试图 调用 它 时 出 现 的 错误 。 

9. wingElLappezr 是 一 个 并 数 。 

12. 本 章 使 用 了 setTimeout 来 创建 一 个 制作 什么 的 定 
时 器 ? 

13. 在 代码 顶层 被 赋 给 变量 的 函数 表达 式 拥有 _ 
作用 域 。 

14. 要 升 职 加 薪 ， 你 必须 明白 什么 的 工作 原理 ? 

16. 不 是 在 当前 作用 域内 定义 的 变量 。 

17. 在 本 章 中 ， 在 闭 包 外 面 将 变量 doneMessage 的 值 
修改 成 了 什么 ? 

18. 为 所 有 自由 变量 都 提供 了 值 的 环境 可 以 
函数 。 





纵向 

1. 在 本 章 中 ， 每 次 都 说 对 了 的 人 。 

2. 在 本 章 中 ， 一 页 之 间 就 换 了 衬衫 的 人 。 

3. 本 章 提 及 的 一 部 电影 ， 其 中 使 用 了 “消失 ”(derezzed) 
一 词 。 

5. 没有 名 称 的 函数 表达 式 。 

7. 函数 和 与 之 相关 联 的 什么 称 为 闭 包 ? 

8. 函数 表达 式 的 结果 是 一 个 函数 。 

10. 设置 小 甜 饼 制作 定时 器 时 ， 我 们 向 setTimeout 传 
递 了 一 个 函数 ”  。 

11. 形 参 是 变量 ， 因 此 包含 在 定义 变量 的 环 
15. 作用 域 意 味 着 通过 查看 代码 的 结构 就 能 
确定 变量 的 作用 域 。 
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练习 答案 


Gi 谋 和 | 
分 


人 
4 


在 下 面 的 代码 中 ， 有 几 个 地 方 都 可 使 用 匿名 函数 。 请 尽 可 能 地 使 用 匿 
名 函数 重新 编写 这 些 代码 。 你 可 将 旧 代 码 删 除 ， 并 写 入 新 代码 。 你 还 
需 完 成 另 一 个 任务 : 将 这 些 代码 中 的 匿名 函数 圈 出 来 。 答 案 如 下 。 


window.onload = init; 
var cookies = { 


instructions: "Preheat oven to 350...", 








bake:/ function(time) { 
console.log("Baking the cookies."); 


setTimeout(done, time); 





}; 

function init() { 
Var button = document.getElementById("bake"); 
button.onclick = handleButton; 

} 

function handleButton() { 
console.log("Time to bake the cookies."); 
cookies.bake(2500); 

} 

function done() { 
alert("Cookies are ready, take them out to cool."); 


console.log("Cooling the cookies."); 







Var cool function() { 


alert("Cookies are cool, time to eat!"); 


setTimeout(cool, 1000); 
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我 们 重新 编写 了 上 述 代 码 ， 使 用 了 两 个 匿名 函数 
表达 式 : 一 个 对 应 于 函数 in 二 ， 另 一 个 对 应 于 函 
数 handleButton。 
家 们 将 一 个 函数 表 达 式 赂 给 了 属 全 


> sk i 


Var button = document.getElementById("bake"); 


button.onclick = function() { < 
并 将 另 一 


个 EE 米 人 由 
console.log("Time to bake the cookies."); 了 属性 b | 通 数 表达 式 赋 给 
utton.onclick, 


window.onload = function() { 


cookies.bake(2500); 
}s 
}; 


var cookies = { 


instructions: "Preheat oven to 350...", 


bake: function(time) { 


console.log("Baking the cookies."); 


setTimeout(done, time); 
}; 


function done() ({ 


alert("Cookies are ready, take them out to cool."); 


console.log("Cooling the cookies."); 








Var cool =( function() { 


如 果 你 发 现 了 可 以 像 这 样 直接 将 


水 : 
奴 cool 传 递 给 5etTimeout， 就 可 以 
加 分 。 


alert("Cookies are cool, time to eat!"); 


setTimeout(cool, 1000); vy 


} setTimeout(function() { 


alert("Cookies are cool, time to eat!'"); 


}, 1000); 
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练习 答案 


为 确保 你 理解 了 将 匿名 函数 表达 式 传递 给 水 数 的 语法 ， 请 对 下 述 将 变量 (这 里 是 
vaccine) 用 作 实 参 的 代码 进行 修改 ， 将 匿名 防 数 表达 式 用 作 实 参 。 答 案 如 下 。 





0 
济 ， 


请 注意 ， 用 作 实 参 的 函数 表 这 
administer(patient, function(dosage) { L 一 式 完全 可 以 横 跨 多 行 。 不 过 ， 


if (dosage > 0) { 议 样 做 时 一 定 雪 注意 语法 ， 四 
inject(dosage):; 为 很 容易 出 错 。 
} 
}, time); 






轮 到 你 了 。 请 尝试 创建 下 面 的 闭 包 。 我 们 知道 这 对 初学 者 来 说 不 容易 ， 必 要 时 请 参阅 本 章 
结 习 未 尾 的 答案 。 重 要 的 是 不 断 地 思考 这 些 示例 ， 直 到 完全 明白 为 止 。 


一 人 答案 如 下 。 


a 


第 一 题 (10 分 ) 
makePassword 将 实际 密码 作为 参数 ， 它 返回 一 个 这 样 的 函数 ， 将 猜测 的 密码 作为 参数 ， 
并 在 猜测 的 密码 与 实际 密码 相同 时 返回 true。( 对 于 这 些 有 关闭 包 的 描述 ， 可 能 需要 读 几 
遍 才 能 明白 。) 
从 makePassword 返 回 的 函数 是 
makePassword(password) { 一 个 闭 包 ， 其 环境 中 包含 目 由 


return function guess (PasswordGuess) { 上 一 变量 password。 


return (passwordGuess === password); 
i 我 们 向 makePassword 传 入 了 
} Eee 值 secret”， 因 此 在 闭 包 
本 ma 、 
var tryGuess = makePassword("secret"); 的 环境 中 存储 的 是 这 个 值 。 
console.log("Guessing 'nope': " + tryGuess("nope")); 
console.log("Guessing 'secret': " + tryGuess("secret")); 
刁 \ 多 \ 4) 的 ;5 
注意 到 这 里 使 用 了 一 个 带 名 称 的 函数 表达 式 | Rit 
总 及 nope x 5 七 SF 下 量 
并 非 必须 这 样 做 ， 但 这 提供 了 一 种 引用 内 部 名 p ecre 不 境 中 发 量 


汪 用 浙 回 的 了 瑟 妆 assword 的 值 进 行 比较 。 
数 的 便利 途径 。 请 注意 ， 调用 返回 的 函数 时 ， p 了 比较 


必须 使 用 tryGuess， 而 不 能 使 用 guess。 


和 下 二 页 
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轮 到 你 了 。 请 尝试 创建 下 面 的 闭 包 。 我 们 知道 这 对 初学 者 来 说 不 容易 ， 必 要 时 请 参阅 本 章 
和 未 尾 的 答案 。 重 要 的 是 不 断 地 思考 这 些 示例 ， 直 到 完全 明白 为 止 。 


HE 


站 


答案 如 下 ( 接 上 一 页 ) 。 

第 二 题 (20 分 ) 

函数 mulLtN 将 一 个 数字 (n) 作为 参数 ， 并 返回 一 个 这 样 的 函数 : 将 一 个 数字 作为 参数 ， 
并 返回 它 与 n 的 乘积 。 


从 multN 返 回 的 函数 是 一 个 闭 包 ， 
function multN(n) { We ee 


return function multBy(m) { 
return n*m; 

}; 四 此 调 用 multN(3) 时 ， 将 返回 一 个 把 
人造 给 它 的 孝 字 与 3 相 乘 的 函数。 
var multBy3 = multN(3); 
console.log("Multiplying 2: " + multBy3(2)); 
console.log("Multiplying 3: " + multBy3(3)); 


第 三 题 (30 分 ) 
修改 前 面 的 计数 器 ， a 但 使 其 定义 变 
量 count， 册 创建 并 返回 一 个 对 象 。 这 个 对 象 包 含 一 个 方法 increment， 它 将 变 


量 count 加 1， 再 返回 这 个 变量 。 


| 这 个 
function makeCounter() { > 它 返 
var count = 0; 是 直 


return { 


a 


函数 与 前 面 的 makeCounter 类 似 ， 只 是 
回 一 个 包含 方法 increment 的 对 象 ， 而 不 
接 


increment: function() { 


count+t++; 芯 一 ee 个 目 变量 count， 
return count; 因此 它 是 一 个 闭 包 ， 其 环境 中 包含 变量 
count。 
} 
}; 
} 这 里 调用 makeCounter， 获 得 一 个 对 象 ， 它 包 合 
a 
Var counter = makeCounter(); 站 为 团 包 的 方法 。 


console.log(counter.increment()); 


console.log(counter.increment()); < 我 们 像 往 党 那样 调用 这 个 方 法 。 当 我 们 这 
console.log(counter.increment()); 样 做 时 ， 这 个 方法 将 引用 其 环境 中 的 变量 
count。 
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练习 答案 


RE 


疝 絮 


S| 
分 





请 根据 你 已 有 的 函数 和 变量 知识 ， 判 断 下 述 哪 些 
说 法 是 正确 的 。 答 案 如 下 。 


SA 变量 handqler 存 储 了 一 个 函数 引用 。 gf 调用 onload 处 理 程序 两 次 是 个 馈 主 意 ， 
为 这 种 处 理 程 序 通 常用 于 为 整个 网 页 做 一 
些 初 始 化 工作 ， 多 次 调用 它 可 能 引发 问题 。 


4 函数 表达 式 创建 函数 引用 。 


1 将 nandler 赋 给 window.onload 时 ， 实 
际 上 是 将 一 个 函数 引用 赋 给 了 它 。 


变量 handqler 仅 用 于 将 其 存储 的 函数 引用 


赋 给 window.on1load。 可 ”我 们 是 不 是 说 过 ， 将 handler 赋 给 window。 
、 onload 时 ， 实 际 上 是 将 一 个 函数 引用 赋 
可 ”我 们 绝 不 会 再 次 使 用 nandler， 因 为 其 代 ee 
一 口 ， 


码 仅 在 网 页 加 载 完毕 后 执行 一 次 。 





你 的 任务 有 以 下 两 个 。 (1) 在 下 面 的 代码 中 ， 找 出 所 有 的 自由 变量 ， 并 将 它们 圈 出 来 。 自 
变量 指 的 是 并 非 在 本 地 作用 域内 定义 的 变量 。 (2) 从 右边 选择 一 个 可 敲定 这 个 函数 的 环 
境 。 可 禹 定 函 数 的 环境 指 的 是 给 所 有 自由 变量 都 提供 了 值 的 环境 。 答 案 如 下 。 


这 个 环境 给 两 个 目 巾 变量 
beingFunny 和 motSoMuch 
都 提供 了 值 。 













beingFunny = true; 


function JustSayin(phrase) { notSoMuch = false; 


Var ending 一 ls inConversationWith = "Paul" 
if (Genorunny) | 
ending = " -- Im just sayin!"; 
ns 
ending so much."; beingrunny,. = 和 
} justSayin = false; 


oocoder = true; 


alert(phrase + ending); 





亦 这 】 让 notSoMuch = true; 
将 这 些 代码 中 的 所 有 和 目 由 变量 a 
都 图 出 来 。 目 由 变量 不 是 在 本 选择 一 个 能 够 将 这 个 鸳 Phrase = "Do do da"; 

| 襄 [3 band = " ice"; 
地 作用 域内 定义 的 变量 。 数 敲 定 的 环境 。 and = "Police 
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二 叶 | eS 
a 峻 的 Jav ih t 挡 战 
我 们 需要 一 位 闭 包 专家 ， 昕 说 你 就 是 ! 知道 闭 包 的 工作 原理 后 ， 你 现在 明白 下 述 两 个 代码 片段 的 结 


果 都 是 008 的 原因 吗 ? 为 搞 明 白 这 一 点 ， 请 在 下 面 写 出 闭 包 的 环境 中 存储 的 变量 。 请 注意 ， 环 境 完 全 
可 以 是 空 的 。 答 案 如 下 。 


代码 片段 #1 


var secret = "00710 
环境 


function getSecret() { 


secret 
在 getYalue 量 a Secree we 


下 
function getVvalue() { » 


return secret.; 
} 


var secret = "008"， 





return getValue():; 因此 ， 它 被 记录 到 getVYalue 的 环境 中 。 但 我 们 没 
} AN 有 从 get5ecret 返 @getyalue， 因 此 在 创建 议 个 闭 
包 的 上 下 文 外 部 ， 根 本 看 不 到 它 。 


代码 片段 #2 


Var secret = "0070" 
环境 
function getSecret() { 
var secret = "008"; secret 
在 gotYolue 当量 a secret = "008" 
是 -一 个 


function getVvalue() { LA 


return secret.; 
人 


return getValue; < -一 人 人、 、， 
在 这 里 ， 我 们 创建 了 一 个 闭 包 ， 并 将 其 从 get5ecret 返 


四。 因此 ， 当 我 们 在 另 一 个 上 下 文 (全 局 作用 域 ) 中 


调用 getValueFun ( 即 getValue) 时 ， 将 使 用 其 环境 中 的 
getValueFun(); 变量 secret 的 值 。 





} 


var getValueFun = getSecret(); 
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这 是 我 们 给 出 的 答案 : 


(function(food) { 
if (food === "cookies") { 
alert("More please"); 
} else if (food === "cake") { 
alert("Yum yum"); 
} 


}) ("cookies"); 


你 的 任务 不 仅 是 明白 这 段 代码 是 做 什么 的 ， 还 要 明白 它 是 怎么 做 的 。 

为 此 ， 你 需要 进行 还 原 ， 即 将 其 中 的 匿名 函数 提取 出 来 ， 将 其 赋 给 一 

个 变量 ， 再 在 原本 使 用 函数 表达 云 的 地 方 使 用 这 个 变量 。 这 样 处 理 后 ， 

代码 是 不 是 更 容易 理解 了 ? 它 到 旗 是 做 什么 的 呢 ? 
这 是 提取 出 来 的 函数 ， 我 们 
将 其 赋 给 了 变量 eat。 如 果 愿 


意 ， 也 可 以 使 用 函数 声明 来 
if (food === "cookies") 1 创建 这 个 函数 。 


var eat = function(food) { 


alert("More please"); 
} else 1if (foo 二 二 二 "cake") { 


alert("Yum yum"); 


当然 ， 也 可 将 其 写 为 

ea3t (‘cookies”), 但 这 } 
时 的 做 法 得 在 演示 如 。 }; 

何 用 eat 来 蔡 换 前 面 的 (eat) ("cookies"); 
消 数 表达 式 ，。 EE 


) Se 根据 上 述 分 析 可 知 ， 这 些 代 码 所 做 的 
这 里 所 做 的 是 对 “cookies ”调用 eat， 是 ， 内 上 藤 一 个 函数 表达 式 ， 然 后 立即 调 


人 用 它 并 向 它 传递 一 个 实 参 。 
原因 如 下 : 别 忘 了 ， 范 数 声 明 以 关键 字 function 打 头 ， 接 下 来 个 


是 函数 名 ， 而 函数 表达 式 人 必须 是 语句 的 一 部 分 。 对 于 上 述 函 
数 表 达 式 ， 如 果 不 用 圆 括号 括 起 ，JavaScript 解 释 器 将 认为 它 
是 一 个 函数 声明 ， 而 不 是 函数 表达 式 。 但 调用 eat 时 ， 不 需 受 
用 圆 括号 将 其 括 起 ， 因 此 你 可 以 将 这 些 圆 括号 删 际 。 


因此 这 些 代码 在 一 个 提示 框 中 显示 消 
息 “More please 6 
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下 访 JavaScript 烷 学 游戏 管 案 
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高 级 对 象 攀 造 技巧 


他 是 
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到 目前 为 止 ， 我 们 都 以 手动 方式 创建 对 象 : 对 于 每 个 对 象 ， 都 使 用 
对 象 字面 量 来 指定 其 所 有 属性 。 小 规模 地 创建 对 象 时 ， 这 没有 问题 ， 但 要 编 
写 正式 的 代码 ， 需 要 使 用 更 好 的 方式 。 这 正 是 对 象 构造 函数 的 用 武之 地 。 使 
用 构造 函数 ， 可 更 轻松 地 创建 对 象 ， 还 可 让 所 有 对 象 都 采用 相同 的 设计 蓝 
图 ， 也 就 是 说 ， 使 用 构造 函数 可 确保 所 有 对 象 都 包含 相同 的 属性 和 方法 。 通 
过 使 用 构造 函数 ， 编 写 的 对 象 代码 将 简洁 得 多 ， 而 且 创建 大 量 对 象 时 不 容易 
出 错 。 阅 读 完 本 章 后 ， 你 谈论 起 构造 函数 ， 就 会 像 是 在 对 象 镇 长 大 的 一 样 。 
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使 用 对 象 字面 量 


使 用 对 象 字 面 量 创建 对 象 


到 目前 为 止 ， 本 书 都 是 使 用 对 象 字面 量 来 创建 对 象 的 。 使 用 对 象 字面 量 
创建 对 象 时 ， 你 逐个 地 指定 其 属性 ， 如 下 所 示 : 





var taxi = { 
make: "Webville Motors", 
model: "Taxi", 


year: 1955, 





color: "yellow", 
passengers: 4, 


convertible: false, 


De 使 用 对 象 字面 量 创建 对 象 时 ， 你 
started: false, S_ 在 花 括 号 内 列 出 对 象 的 各 个 部 


分 ， 将 各 部 分 都 列 出 后 ， 就 得 
到 了 一 个 Java5Script 对 象 。 你 通 
常 将 其 赋 给 一 个 变量 ， 供 以 后 使 
用 。 


start: function() { this.started = true;}, 
stop: function() { this.started = false;}, 


drive: function { 


// 方法 drive 的 代码 


对 象 字面 量 提供 了 一 个 便利 方式 ， 让 你 能 够 在 代码 中 随时 随地 创建 对 象 ， 但 需 
要 创建 大 量 对 象 (如 一 个 出 租车 车 队 ) 时 ， 你 不 想 输 入 数 百 个 对 象 字面 量 ， 不 


征 吗 ? 


ge 


想 想 看 ， 使 用 对 象 字面 量 创 建 大 量 出 租车 对 象 时 ， 还 可 能 导致 哪些 问题 ? 


| | 。 大 量 输入 让 你 手 抽筋 。 | | 必须 在 很 多 地 方 复制 方法 start、stop 和 
drive 的 代码 。 
[|_|」 ”你 能 确保 所 有 出 租车 都 包含 相同 的 属性 吗 ? 
如 果 出 现 输入 错误 或 遗漏 了 某 个 属性 呢 ? | | 要 增删 属性 或 修改 方法 stazt 和 stop 的 工 
作 方式 时 ， 必 须 对 所 有 的 出 租车 对 象 进行 
| | ”大 量 的 对 象 字面 量 意味 着 大 量 的 代码 ， 这 会 相应 的 修改 . 


不 会 延长 浏览 器 的 下 载 时 间 呢 ? 
[有 了 打车 软件 ， 谁 还 需要 出 租车 ? 
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这 个 绝对 是 我 们 一 直 处 理 的 汽车 对 象 ， 
它 包 含 约定 的 所 有 属性 和 方法 。 


到 目前 为 止 ， 我 们 创建 对 象 时 都 遭 守 约定 。 例 如 ， 我 们 将 属性 和 


方法 放 在 一 起 ， 并 称 之 为 “汽车 对 象 ” 或 “小 狗 对 象 ”。 它 们 成 为 


对 象 的 唯一 原因 息 齐 守 了 约定 。 


小 规模 地 创建 对 象 时 ， 这 种 做 法 也 许可 行 ， 但 需要 创建 大 量 对 象 ， 
或 者 有 大 量 开 发 人 员 参 与 开发 而 他 们 不 完全 了 解 或 遵守 约定 时 ， 


这 种 做 法 就 行 不 通 了 。 


耳 听 为 虚 ， 眼 见 为 实 。 来 看 看 本 书 前 面 所 谓 的 汽车 对 象 。 


这 看 起 来 是 一 个 不 错 的 汽车 对 象 ， 
但 它 缺 少 一 些 基本 属性 ， 如 mileage 
和 color。 它 还 有 一 些 额 外 的 属性 。 
这 可 能 是 个 问题 。 


这 个 对 象 与 其 他 汽车 对 象 很 像 ， 
但 它 有 一 个 thrust 方 法 。 真 不 敢 
确定 它 就 是 汽车 对 象 。 











ro 


var rocketCar = { 
make: "Galaxy", 
model: "4000", 
year: 2001, 
color: "white", 
passengers: 6, 
convertible: false, 
mileage: 60191919, 
started: false, 



























start: function() { 
this.started = true; 


}, 


stop: function() { 
this.started = false; 







}, 

















drive: function() { 
// 方法 drive 的 代码 
}, 






thrust: function(amount) { 
// 方法 thrust 的 代码 
} 









Var toyCar = { 
make-: "Mattel", 
model: 
color: "bluen 
type: "wind up", 
price: 


oe 


Var taxi = 1 
make: "Webville Motors", 
model: "Taxi", 
year: 1955, 
color: "yellow", 


Passengers: 4, 
Convertible: false, 
mileage: 281341, 

started: false, 





start: function() { 
this.started = true; 


}, 


stop: function() 1 





make: "Ford", 
model: "Thunderbird", 
year: 1957, 


passengers: 4, 
convertible: true, 
started: false, 
oilLevel: 1.0, 












"PeeWee", 









start: Eunction() { 
if (oilLevel > .75) { 
this.started = true; 


"2.99" 











} 
}, 











这 可 能 是 一 个 把 
车 对 象 ， 但 与 其 
他 汽车 对 象 一 吕 
都 不 像 。 它 有 属 
性 make、model 
和 color， 但 看 起 
来 像 玩 具 ， 而 不 
是 汽车 。 它 怎么 
会 在 这 里 呢 ? 


stop: function() { 
this.started = false; 





}, 












drive: Eunction() { 


// 方法 drive 的 代码 
} 


你 现在 的 位 置 ， 
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如 果 有 一 种 像 饼 于 模具 的 对 象 创 建 方式 ， 可 才 
助 创 建 基本 结构 相同 的 对 象 就 好 了 。 和 这 样 ， 创 建 
的 所 有 对 象 都 将 看 起 来 一 样 ， 它 们 包含 在 一 个 地 方 
定义 的 所 有 属性 和 方法 。 但 我 知道 ， 和 这 不 过 是 白 日 
做 多 。 
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对 象 构造 铅 数 简介 


对 象 构造 函数 (人 简称 为 构造 函数 ) 让 你 能 够 更 好 地 创建 对 象 。 
构造 国 数 犹如 一 个 小 型 工厂 ， 能 够 创建 无 数 类 似 的 对 象 。 


从 代码 的 角度 看 ， 构 造 国 数 很 像 返回 对 象 的 国 数 : 定义 后 ， 每 
当 需 要 创建 新 对 象 时 都 可 调用 它 。 但 正如 你 将 看 到 的 ， 构 造 函 
数 并 韭 这 里 说 得 那么 简单 。 

要 明白 构造 函数 的 工作 原理 ， 最 佳 方式 古 创建 一 个 。 我 们 以 本 
书 前 面 的 小 狗 对 象 为 例 ， 编 写 一 个 构造 国 数 ， 让 我 们 能 够 根据 
需要 创建 任意 数量 的 小 狗 对 象 。 下 面 是 本 书 前 面 使 用 的 小 狗 对 
象 ， 它 包含 属性 name、breedq 和 weight。 








Li 
breed 


— 





weight 


Dog 


要 使 用 对 象 字 面 量 创建 这 样 的 小 狗 对 象 ， 代 码 将 类 似 于 下 
面 这 样 ， 


var dog = { “使 用 对 象 字 面 量 创建 的 一 个 简单 
name: "Fido", 的 小 狗 对 象 。 现 在 我 们 需要 想 出 
breed: "Mixed", 创建 大 量 小 狗 对 但 的 办 法 。 
weight: 38 

}; 


但 我 们 要 做 的 不 是 创建 一 个 名 为 Fido 的 小 狗 对 象 ， 而 是 找到 一 种 办 法 ， 


创建 任何 包含 名 称 、 品 种 和 体重 的 小 狗 对 象 。 为 此 ， 我 们 将 编写 一 些 
代码 ， 它 类 似 于 函数 ， 同 时 在 语法 上 又 有 扩 像 对 象 。 

听 了 前 面 的 介绍 ， 你 心里 肯定 痒痒 的 。 请 翻 到 下 一 页 ， 看 看 如 何 创 建 
这 样 的 构造 国 数 。 
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对 和 信物 沙 访 次 和 总 
习 如 何 编写 和 爹 用 
板 滥 肪 次 时 荔 必 牢 
纪 冰 一 点 ，。 









在 我 看 来 ,构造 喇 
数 就 是 个 旨 总 此 斯 更 的 
怪物 ， 直 鸟 数 和 对 象 的 特征 
措 凌 而 成 。 还 有 上 比 这 更 神奇 
的 吗 ? 











要 知道 其 中 的 原因 ， 
请 翻 到 下 贝 O 
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创建 构造 函数 


如 何 创 建构 造 咏 数 


要 使 用 构造 国 数 ， 可 以 分 两 步 走 : 先 定义 一 个 构造 函数 ， 再 使 用 它 来 创建 对 
象 。 下 面 先 来 介绍 如 何 创建 构造 函数 。 


我 们 需要 的 是 一 个 可 用 于 创建 小 狗 对 象 的 构造 图 数 ， 更 具体 地 说 是 用 于 创建 
包含 名 称 、 品 种 和 体重 的 小 铬 对 象 。 因 此 ， 我 们 定义 一 个 被 称 为 构造 国 数 的 
图 数 ， 它 知道 如 何 创 建 小 狗 对 象 ， 如 下 所 示 : 
注意 到 我 们 给 构造 函数 命名 时 ， 采 用 了 
首 字母 大 写 的 方式 。 并 非 必 须 这 样 做 ， 
但 人 人 都 将 此 视 为 一 种 约定 加 以 遵守 。 





/一 
个 函数 的 形 参 对 应 于 去 给 每 


构造 函数 与 常规 函数 4 全 
看 起 来 没什么 两 样 。 到 和 个 小 狗 对 象 提供 的 性。 


function Dog(name, breed, weight) { 
this.name = name; 
this.breed = breed.:; < 这 部 分 看 起 来 更 像 对 象 ， 我 们 将 每 个 


z 参 都 赋 维 Py 
this.weight = weight; 形 参 都 感 给 了 看 起 来 像 属 性 的 东西 。 





} 
~ 人 、 与 大 多 数 函 数 中 不 同 ， 我 们 没有 使 用 局 部 变 
i 、 量 ， 而 是 使 用 关键 字 黑 色 。 (到 目前 为 止 ， 
0 形 参 名 不 以 注意 到 这 个 构造 函 es 
er 数 什 么 都 没有 返回 ， 我 们 只 在 对 象 中 这 样 做 过 。 ) 
也 是 约定 。 八 请 接着 往 下 看 ， 接 下 来 我 们 将 


介绍 如 何 使 用 这 个 构造 函数 ， 
届时 这 样 做 的 原因 将 一 目 了 然 。 


SR 旗 笔 上 阵 
NS 我 们 需要 你 的 帮助 。 我 们 以 前 一 直 使 用 对 象 字 面 量 来 创建 鸭子 对 象 。 利 用 


刚 学 到 的 知识 ， 你 能 否 为 我 们 编写 一 个 创建 鸭子 对 象 的 构造 函数 ?下面 是 
我 们 使 用 的 一 个 对 象 字 面 量 ， 你 可 以 据 此 来 编写 构造 函数 : 





var duck = { 
type: "redheaded", 


canFly: true 


} 编写 一 个 创建 鸭 了 
\ 0 
一 个 网 子 对 象 字面 量 。 备注 : 我 们 知道 你 还 没有 完全 明 自 构造 函数 的 工作 原理 ， 


现在 请 暂时 将 重点 放 在 语法 上 。 
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如 何 使 略 攀 造 呜 数 


前 面 说 过 ， 要 使 用 构造 函数 ， 可 分 两 步 走 : 先 创 建 一 个 构造 函数 ， 再 使 用 它 。 前 
面 创建 了 构造 国 数 Dog， 下 面 就 来 使 用 它 吧 ， 如 下 所 示 : 








为 创建 小 狗 对 象 ， 我 们 然后 指定 实 参 。 请 将 下 面 的 话 大 声 读 出 来 : 
使 用 了 运算 符 new。 由 调用 构造 为 创建 fido， 我 创建 一 个 名 
遂 数 Dog。 称 为 Fido、 品 种 为 Mixed、 


重 为 58 磅 的 小 狗 对 象 。 
Var fido 一 new Dog("Fido", "Mixed", 38); 体重 为 58 荔 的 


要 创建 一 个 名 称 为 Bidqo、 品 种 为 Mixedq、 体 重 为 38 磅 的 小 狗 对 象 ， 我 们 首先 指 
定 关 键 字 new， 再 使 用 合适 的 实 参 调 用 构造 畏 数 Dog。 这 条 语句 执行 完毕 后 ， 变 
量 fido 将 包含 一 个 指 问 新 小 狗 对 象 的 引用 。 


有 了 构造 冰 数 Dog 后 ， 我 们 就 可 以 不 断 地 创建 小 狗 对 象 : 
var fluffy = new Dog("Fluffy", "Poodle", 30); 
Var SPot = new Dog("Spot", "Chihuahua", 10); 








相 比 于 使 用 对 象 字 面 量 ， 这 种 对 象 创建 方式 是 不 是 更 容易 些 ? 通过 这 种 方式 创建 小 
狗 对 象 ， 可 确保 每 个 小 狗 对 象 都 包含 相同 的 属性 : name、 breed 和 weight。 





function Dog(name, breed, weight) { 下 面 来 做 一 个 简单 的 练习 
this.name = name; 


es a 有 
: 续 习 | this.breed = breed; 你 元 站 i 
i 人 请 将 左边 的 代码 加 入 一 个 网 
} 页 中 ， 再 进行 测试 ， 并 将 输 
var fido = new Dog("Fido", "Mixed", 38); 出 记录 在 下 面 。 
var fluffy = new Dog("Fluffy", "Poodle", 30); ) 


var SPot = new Dogl("Spot", "Chihuahua", 10); 
Var dogs = [fido, fluffy, spot]; 


for (var i = 0; i < dogs.length; I++) { 


var size = "small"; 
if (dogs[i].weight > 10) { 
size = "large"; 
} 
console.log("Dog: " + dogs[I].name 
+ " ijsa" + size 
+ " "+ dogs[il].breed); 














构造 函数 的 工作 原理 


构 选 画 数 的 工作 原理 幕后 花絮 


你 知道 了 如 何 声 明 构 造 函 数 以 及 如 何 使 用 它 来 创建 对 象 ， 但 还 需 看 看 
医 后 的 情况 ， 以 了 解构 造 函数 的 工作 原理 。 要 明白 构造 函数 的 工作 原 
理 ， 关 键 在 于 了 解 运算 符 new 都 做 了 些 什么 。 


先 来 看 看 前 面 用 来 创建 对 象 fido 的 语句 : 











var fido = new Dog("Fido", "Mixed", 38); 





请 看 赋值 运算 符 的 右边 ， 所 有 的 操作 都 是 在 这 里 进行 的 。 我 们 来 跟踪 一 
下 其 执行 过 程 。 


《人 new 首先 创建 一 个 新 的 空 对 和 泉 。 


人 @)) 接 下 来 ， new 设置 this， 使 其 指 自 这 个 新 对 象 。 人 一 第 5 章 说 过 ，this 存 储 
了 一 个 引用 ， 指 向 代 

@ 

p44 


+his 码 当 前 处 理 的 对 象 。 
7 
(@) 设置 this 后 ， 调 周 西数 Dog， 并 将 "Fido"、 

"Mixed" 和 38 作 为 实 参 传递 给 它 。 


"Fido" "Mixed" 38 


sv vr 


function Dog(name, breed, weight) { name: "Fido" 


this.name = name; 
this.breed = breed.; 5 


this.weight = weight; 


this 
. 7 
name: "Fido" 
了 4 a r 二 b d: "Mi 由 
人 图 接 下 来 ， 执行 这 个 喇 数 的 代码 。 与 大 多 数 构 造 印 数 一 __ breed: "Mixe 
样 ，Dog 给 新 创建 的 this 对 象 的 属性 赋值 。 a 
7 
name: "Fido" 
breed: "Mixed" 
通过 执行 Dog 冯 数 的 代码 ， 将 相应 -一 ” RE 
的 形 参 赋 给 三 个 属性 ， 从 而 对 新 对 \y 


象 进 行 定制 。 
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@) 最 后 ,bog 配 数 执行 完毕 后 ， 和 运算 符 new 和 返回 this 
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指向 新 创建 幕后 花絮 


的 对 象 的 四 用。 请 注意 ， 它 会 自动 为 你 返回 this， 你 无 需 在 代码 
中 显 式 地 返回 。 指 向 新 对 和 象 的 引用 被 返回 后 ， 我 们 将 其 贼 给 变量 
fido。 








一 name: Fido 
-一 breed: 人 ixed 
A 四 weight: 38 


_ 变 身 浏览 器 


下 面 的 JavasScript 代 码 存 在 一 些 错误 ， 你 的 任务 是 变 身 浏览 器 ,将 这 些 
葡 误 找 出 来 。 完 成 这 个 练习 后 ， 翻 到 本 童 末尾， 硕 硕 你 是 否 将 所 
有 的 错误 都 找 出 来 了 。 顺 便 说 一 和 名， 这 是 第 12 章 。 如 果 你 愿 
意 ， 也 可 在 其 中 添加 注 称 。 你 里 就 有 和 这样 的 权利 了 。 









function widget(partNo, size) ({ 
var this.no = partNo; 
var this.breed = size; 

} 

function FormFactor(material, widget) { 
this.material = material, 
this.widget = widget, 


return this; 


var widgetA = widget(100, "large"); 
var widgetB = new widget(101, "small"); 
var formFactorA = newFormFactor("plastic", widgetA); 


var formFactorB = new ForumFactor("metal", widgetB); 


Fe TT mf pF EE 
1 I TT A = Dh 
4 4 A A = 二 和 
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回 构 造 函 数 添加 方法 


5T OL 米 Pa ES < 

还 能 在 攀 造 西数 中 定义 方法 

构造 国 数 Dog 创 建 的 小 狗 对 象 与 本 书 前 面 的 小 狗 对 象 类 似 ， 只 起 不 会 叫 ， 因 为 它们 没有 
bark 方 法 。 这 个 回 题 很 容易 解决 ， 因 为 在 构造 函数 中 ， 除 了 能 给 属性 指定 值 外 ， 还 可 以 


定义 方法 。 下 面 就 来 扩展 前 面 的 代码 ， 以 添加 park 方 法 : 顺便 说 一 句 ， 在 对 象 
一 一 > 中, 方法 也 是 属性 ， 
只 是 将 函数 赋 给 了 这 


种 属性 。 














专 添 加 bark 方 法 ， 只 需 将 一 个 
i 函数 (这 里 是 一 个 匿名 函 教 ) 

ee 研 给 属性 this.bark。 
this.breed = breed; 有 


function Dog(name, breed, weight) { 


this.weight = weight; 
this.bark = function() { 
if (this.weight > 25) { 


alert(this.name + " says Woof!"); 
ee 现在 ， 每 个 小 狗 对 象 都 有 
bark 方 法 ， 你 可 以 调用 它 。 


alert(this.name + " says Yip'"); 


}; 


请 注意 ， 与 以 前 创建 的 其 他 所 有 对 象 一 样 ， 
我 们 使 用 this 来 表示 当前 对 象 。 





快速 测试 bark 方 法 等 因 寿 
构造 函数 介绍 得 差不多 了 ， 我 们 将 上 述 代码 添加 到 一 个 


HTML 页 面 中 9 再 在 该 页 面 中 诡 加 如 下 训 试 代码 : 人 The page at localhost Say5: 
Fido says Woof! 
var fido = new Dog("Fido", "Mixed", 38); | Cok | 
var fluffy = meW Dog("Fluffy", "Poodle", 30); The page at localhost says: 
var spot = new Dog("Spot", "Chihuahua", 10); © Em 
var dogs = [fido, fluffy, spot]; -ok 


The page at localhost Says: 


for (var i = 0; i < dogs.length; i++) { @ 人 hn io 


dogs[i].bark(); 
确认 小 狗 对 象 像 预 期 的 那样 叫 。 


人 pr ) 
530 吊 12 重 
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有 人 给 我 们 提供 了 一 个 点 咖啡 的 构造 函数 ， 但 没有 定义 方法 。 
我 们 需要 方法 getSize， 它 根据 加 入 的 咖啡 量 返 回 一 个 字符 
串 : 

国 ”咖啡 量 为 8 准 司 ?时 返回 small; - 3 
加 ”咖啡 量 为 12 竹 司 时 返回 medium; 

国 ”咖啡 量 为 16 符 司 时 返回 large。 

我 们 还 需要 方法 toString， 它 返回 一 个 字符 串 ， 指 出 你 点 的 是 哪 种 咖 


啡 ， 刀 "Yomwe Ordered a small House Blend eoffee 


请 补 全 下 面 的 代码 ， 再 在 浏览 器 中 进行 测试 。 羡 试点 几 杯 大 小 各 异 的 
咖啡 。 码 看 本 章 末 尾 的 答案 ， 再 继续 往 下 阅读 。 





function Coffee(roast, ounces) { 
this.roast = roast; 


this.ounces = ounces; 
(一 编写 在 这 个 构造 函数 中 定义 
~ [人 AN 友人 * 码 
上 述 网 | 方法 的 人 0o5 。 


Var houseBlend = new Coffee("House Blend", 12); 


console.log(houseBlend.toString()); 


var darkRoast = new Coffee("Dark Roast", 16); JavaScript 控 制 全 


console.log(darkRoast.toString()); 
You've ordered a medium House 

要 Blend coffee. 
这 是 我 们 得 到 的 输出 。 你 


You've ordered a large Dark 


得 到 的 输出 应 与 此 类 似 :> coffee 





0O 冀 司 为 英制 重量 单位 。1 坦 司 =28.35$ 克 。 一 一 编者 注 


你 现在 的 位 置 ， 531 


天 于 构造 函 


数 的 问题 


人 
和) ; 构造 函数 名 的 首 字母 为 
何 要 大 写 ? 


合 ， 这 是 JavaScript 开 发 人 员 
遵守 的 一 种 约定 ， 让 开发 人 员 
够 一 眼 就 看 出 哪些 隐 数 是 构 
造 函 数 ， 哪 些 函 数 是 
为 什么 要 区 分 这 一 点 呢 ? 因为 
调用 构造 函数 时 ， 需 要 使 用 运 
算 符 new。 一 般 而 言 ， 将 构造 逊 
数 名 的 首 字 母 大 写 能 够 让 代码 
阅读 者 更 容易 识别 它们 。 


y 

[9) : 也 就 是 说 ， 构 造 函 数 与 
常规 函数 没什么 两 样 ， 只 是 前 
者 设置 this 对 和 象 的 属性 ? 

A 


四 
吟 " ， 如果 你 说 的 是 计算 方面 ， 


答 娄 是 肯定 的 。 在 第 规 函 数 中 
可 以 做 的 任何 事情 ， 在 构造 阵 
数 中 都 可 以 做 ， 如 声明 和 使 用 
变量 、 使 用 for 禧 环 、 调 用 其 他 
总数 等 ; 


否则 
它 创 


为 除非 返回 的 是 this， 
这 将 寻 致 构造 函数 不 返回 
建 的 对 象 。 


各) 构造 函数 的 形 参 必须 与 
属性 同名 吗 ? 


常规 双 数 。 


但 有 一 件 事情 不 能 做 ， 
那 就 是 从 构造 吕 数 中 返回 值 ， 


世上 次 有 
昌 和 项 的 问题 


NS 


A 

只 ” 不是， 可 使 用 任何 形 参 
名 。 形 参 仅 用 于 存储 要 赋 给 对 
象 的 属性 
重要 的 是 给 对 象 的 属性 指定 的 


名 称 。 虽 然 如 此 ， 出 于 提高 清 
晰 度 的 考虑 ， 常 第 让 形 参 与 属 


性 同名 。 这 样 只 需 查 看 构造 函 
数 的 定义 ， 就 知道 要 给 哪些 属 
性 赋值 。 


9): s 使 用 构造 函数 创建 的 对 
象 与 使 用 对 象 字 面 量 创建 的 对 
象 没 什么 两 样 ， 对 吗 ? 


AAA ， 

份 ， 在 不 涉及 下 一 章 将 讨论 
的 更 高 级 的 对 象 设 计时 ， 是 这 
样 的 。 


[9): 为 何 需要 使 用 new 来 创 
建 对 象 ? 不 是 可 以 在 常规 函数 中 
创建 并 返回 对 象 吗 ? (就 像 第 5 
章 的 makeCar 所 做 的 那样 。) 


AAA ，。 

只 。 是 的 ， 可 以 这 样 创建 对 
象 ， 但 正如 前 面 所 说 ， 使 用 new 
时 会 执行 一 些 额 外 的 操作 ， 这 
将 在 本 章 后 面 和 第 13 章 介绍 。 


， 以 定制 对 象 的 值 。 


\S 

加 )】 ， 我 对 构造 函数 中 的 this 
还 是 感到 有 点 迷惑 。 我 们 使 用 
this 来 给 对 象 的 属性 赋值 ， 还 
在 对 和 象 的 方法 中 使 用 this, 它 
们 指 的 是 一 回 事 吗 ? 


AAA ， 

吟 " 。 调用 构造 函数 来 创建 对 
象 时 ，this 被 设置 为 一 个 引用 ， 
指向 正在 创建 的 新 对 象 ， 因 此 
构造 函数 的 所 有 代码 针对 的 都 
是 这 个 新 对 象 。 

对 象 创建 后 ， 当 你 对 其 调用 方 
法 时 ， this 被 设置 为 方法 被 
调用 的 对 象 。 因 此 ， 在 方法 中 ， 
this 总 是 表示 方法 被 调用 的 对 
痕 。 


4 

[9) s 使 用 构造 函数 创建 对 象 
是 否 胜 过 使 用 对 象 字面 量 创建 
对 象 ? 


AAA ， 

只 ， 这 两 种 方式 都 有 其 用 起 
之 地 。 需 要 创建 大 量 包 含 相 同 
属性 和 方法 的 对 象 时 ， 构 造 函 


数 很 有 帮助 。 使 用 构造 吕 数 很 
方便 ， 可 重用 代码 ， 还 可 确保 
对 象 的 一 致 性 

但 有 时 候 ， 需 要 创建 一 次 性 的 


简单 对 和 象 。 在 这 种 情况 下 ， 使 
用 对 象 字面 量 显 得 更 简洁 、 更 
具 表 达 力 。 

因此 ,使 用 哪 种 方式 完全 取决 
于 你 的 需要 。 它 们 都 是 很 不 错 
的 对 象 创建 方式 。 


稍 后 你 将 看 
到 一 个 这 样 
的 示例 。 
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J vs TE 

使 用 构造 函数 时 ， 有 一 点 需要 特别 小 心 : 千 万 别 志 了 使 用 关键 字 new。 你 可 能 很 容易 忘记 这 样 做 ， 因 为 
构造 国 数 也 是 图 数 ， 不 使 用 关键 字 new 也 能 够 调用 它 。 但 调用 构造 国 数 时 如 有 果 忌 记 了 使 用 new， 可 能 导 
致 代 码 出 现 难以 找 出 的 pug。 来 看 看 忘记 使 用 关键 字 new 时 可 能 发 生 的 情况 : 








function Album(title, artist, year) { 
this.title = title; 


和 一 这 个 构造 函数 看 起 
this.artist = artist; 来 一 点 问题 没有 。 
this.year = year; 
this.play = function() { 

// 其 他 代码 SR 
这 也 许 设 有 关系 ， 因 

忘记 使 用 new| 为 Album 也 是 一 个 函数 。 


} 
Ul 
Var darkside = Album("Dark Side of the Cheese","Pink Mouse", 1971); 


darkside.play(); 
“一 一 尝试 调用 方法 play。 麻 烦 来 了 ! 


Uncaught TypeError: Cannot call method 'play' of undefined 


Fr 人 ?1 人“ 汪 

<r4Y 7 月 一 

请 阅读 下 面 的 检查 清单 ， 了 解 为 何 会 发 生 这 种 情况 。 

中 别 忘 了 ，new 首 先 创 建 一 个 新 对 象 ， 将 其 赋 给 this， 再 调用 构造 浮 数 。 如 果 忘 记 


这 个 对 象 是 存储 全 局 
变量 的 顶级 对 象 ， 在 
浏览 器 中 为 window 






使 用 new， 根 本 就 不 会 创建 新 对 象 。 对 象 。 

口 “这 意味 着 在 构造 函数 中 ，this 指 向 的 不 是 新 的 唱片 对 象 ， 而 是 表示 应 用 程序 的 全 
局 对 象 。 

口 “ 如 果 忘 记 使 用 new， 就 不 会 有 对 象 从 构造 函数 返回 。 这 意味 着 没有 可 供 赋 给 变量 ff 
darkside 的 对 象 ， 因 此 darkside 是 未 定义 的 。 正 是 因为 这 一 点 ， 我 们 试图 调用 /A_ 


方法 play 时 出 现 了 错误 ， 指 出 方法 被 调用 的 对 象 未 定义 。 上 国 
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如 果 你 使 有 构造 鳃 数 来 创建 对 象 ， 而 且 在 
试 周 引 周 这 些 对 象 时 总 是 发 现 它 们 是 未 定 
义 的 ， 请 检查 你 的 代码 ， 确 认 调 用 构 禾 区 
数 时 使 用 了 关键 字 new。 


当 半 有 液体 的 开口 试管 在 昂贵 的 
笔记 本 电脑 上 方 倾斜 时 ， 也 请 三 
思 而 行 ! 
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Head First:， new， 你 躲 到 哪里 去 了 ， 怎 么 到 第 12 章 才 
看 到 你 ? 


new: 当前 ， 依 然 有 很 多 脚本 没有 用 到 我 ; 还 有 人 在 
没有 理解 的 情况 下 使 用 我 。 


Head First. 为 什么 会 这 样 ? 


new: 因为 很 多 脚本 编写 人 员 只 使 用 对 象 字面 量 ， 或 
者 直接 复制 并 粘 贴 使 用 我 的 代码 ， 而 不 明白 我 的 工作 
原理 。 


Head First:， 确实 如 此 。 对 象 字 面 量 很 方便 ， 我 自己 
也 不 太 明 白 该 在 什么 时 候 以 及 如 何 使 用 你 。 
EE 忌 


new: 没 钳 ， 我 征 一 种 高 级 功能 。 年 竞 ， 要 明日 如 何 
使 用 我 ， 必 须 先 明白 对 象 的 工作 原理 、 函 数 的 工作 原 
理 、this 的 工作 原理 等 。 只 有 营 握 了 大 量 的 知识 后 ， 
你 才 会 芳 碟 了 解 我 ! 


Head First: 你 能 简单 地 介绍 一 下 自己 吗 ? 我 们 的 读 
者 熟悉 对 象 、 国 数 和 this， 如 果 能 够 激发 出 他 们 学 习 
你 的 动力 ， 那 就 太 好 了 。 

new: 让 我 想 一 想 。 是 这 样 的 : 我 是 一 个 与 构造 图 数 
一 起 用 来 创建 对 象 的 运算 符 。 
Head First: 我 不 想 让 你 扫兴 ， 
是 最 佳 的 。 


new: 你 饺 了 我 吧 ， 我 只 是 一 个 运算 符 ， 又 不 是 公关 














但 这 样 的 向 介 好 像 不 
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KC) re rnd- A 
人 > 起 底 构 造 图 数 
” ”本 周 访谈 :认识 关键 字 new 


Head First: 那 你 是 如 何 操作 的 呢 ? 


new: 首先 ， 我 创建 一 个 新 对 象 。 人 人 都 以 为 这 是 构 
造 图 数 做 的 ， 但 实际 上 是 我 做 的 。 真 是 吃力 不 讨好 。 


Head First: 请 接着 说 。 


new: 接 下 来 ， 我 调用 构造 国 数 ， 并 确保 在 构造 国 数 
的 函数 体内 ， 关 键 字 this 指 向 了 我 创建 的 新 对 象 。 


Head First: 你 为 何 要 这 样 做 ? 
new: 让 构造 函数 中 的 语句 能 够 引用 这 个 对 象 。 毕 


竟 ， 给 这 个 对 象 滞 加 属性 和 方法 才 征 构造 国 数 的 全 
部 意义 所 在 。 使 用 构造 国 数 来 创建 小 狗 和 汽车 等 对 象 


时 ， 你 希望 这 些 对 象 包含 一 些 属性 ， 对 不 对 ” 
Head First: 没 错 。 接 下 来 呢 ? 


new: 接 下 来 ， 我 确保 从 构造 国 数 返 回 创建 的 新 对 
象 。 这 提供 了 极 大 的 便利 ， 让 开发 人 员 不 用 显 式 地 返 
回 它 。 

Head First: 听 起 来 确实 非 党 方便。 既然 如 此 ， 为 何 
有 人 在 学 习 了 你 后 还 使 用 对 象 字 面 量 呢 ? 


new: 我 和 对 象 字面 量 交 情 匪 浅 。 这 个 家 伙 很 了 不 
起 ， 需 要 快速 创建 对 象 时 ， 我 也 会 室 不 犹豫 地 使 用 
它 。 但 需要 创建 大 量 类 似 的 对 象 ， 确 保 对 象 能 够 利用 
代码 重用 ， 需 要 确保 对 象 一 致 以 及 支持 一 些 高 级 对 象 
用 法 时 ， 束 要 用 到 我 了 。 























高 手 。 

Head First: 算 了 ， 你 的 向 介 确 实 提 出 了 几 个 同 题 。 
首先 ， 你 古 个 运算 符 ? 

new: 没 错 ， 我 是 个 运算 符 。 将 我 放 在 函数 调用 的 前 
面 ， 就 能 市 来 翻天 履 地 的 变化 。 运 算 符 对 操作 数 进行 
操作 。 就 我 而 言 ， 我 只 操作 一 种 操作 数 ， 那 就 古 了 负数 
调用 。 


Head First: 更 高 级 的 用 法 ” 快 说 说 | 


new: 还 是 别 分 散 读 者 的 注意 力 ， 到 下 一 章 再 介绍 
H6。 


Head First. 我 想 我 先 得 再 看 一 过 采访 | 
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创建 汽车 构造 函数 


生产 时 间 到 了 


还 好 你 及 时 学 到 了 对 象 构建 技 
因为 我 们 刚 接 到 一 个 很 大 的 汽 

车 订单 ， 疫 法 手动 制作 。 为 按 

时 完成 订单 ， 需 要 使 用 一 个 构造 ” 守 
函数 。 为 此 ， 我 们 将 以 本 书 前 面 使 用 

的 汽车 对 象 字 面 量 为 览 本 ,创建 一 个 生产 汽车 的 
构造 函数 。 


下 面 是 我 们 需 














制造 的 各 种 汽车 ， 注 意 到 我 们 擅 目 让 每 款 汽 车 


都 包含 相同 的 属性 和 方法 。 当 前 ， 我 们 疫 有 考虑 每 种 汽车 的 独特 之 处 ， 


也 没有 考虑 玩具 车 和 火箭 


， 这 些 情况 将 在 后 面 处 理 。 下 面 来 查看 这 些 汽车 对 象 字面 量 ， 并 据 此 





创建 一 个 构造 国 数 ， 以 便 能 够 使 用 它 来 创建 汽车 对 象 ， 用 于 表示 包含 这 些 属 性 和 方法 的 各 种 汽车 。 












= 


var chevy = { 
make: "Chevy'", 
model: "Bel Air", 
year: 1957, 
color: "red'", 
passengers: 2, 
convertible: false, 
mileage: 1021, 

started: false, 












start: function() { 
this.started = true; 


}, 









stop: function!() { 
this.started = false; 


}, 






drive: function() { 
if (this.started) { 
console.log(this.make + " "+ 
this.model + " goes zoom zoom!"); 


} else { 
console.log("Start the engine first."); 
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var cadi 
make: 
model: 
year: 
Color: 
passengers: 35, 

convertible: false, 

mileage: 12892, 


= { 
"GM", 
"Cadillac", 
1955, 
"tan", 














































make: "Fiat" function() {...} 
model: "500" 
year: 1957, ” 









Color: "Med 四 

“ lum B m 
Passengers: 2 lue", 
Sonvertible. 
mileage: 


false, 
88000 
Started. false 
start: function() 
StLop: function() { 
rive function() 

























Oe 


var taxi = 1 
make: "Webville Motors", 
model: "Taxi", 

year: 1955, 

color: "yellow", 
Passengers: 4, 
convertible: false, 
mileage: 281341, 
started: false, 

start: function() {ans} 
stop: function() {...}, 
drive: function() {...} 
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请 利用 你 学 到 的 知识 创建 一 个 car 构 造 函数 。 建 议 你 采取 如 下 步 又。 


@ 首先 ， 指 定 关键 字 function (这 项 工作 我 们 已 经 替 你 完成 了 ) 和 构造 
函数 名 。 再 指定 形 参 : 对 于 每 个 要 为 其 提供 初始 值 的 属性 ， 都 需要 一 个 
形 参 。 





@ 接 下 来 ， 给 对 象 的 每 个 属性 设置 初始 值 (务必 结合 使 用 属性 名 和 关键 字 
EE 


@ 最后， 添加 三 个 方法 : start、drive 和 stop。 


function ( ) { 


继续 往 下 阅读 前 ， 务 必 查 看 本 章 末 尾 的 答案 ， 看 看 你 
) 编写 的 代码 是 否 正 确 。 
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测试 汽车 构造 函数 


试 罗 一 些 新 车 ss > 


有 了 大 批量 生产 汽车 的 方法 后 ， 咀 们 来 生成 一 些 汽车 ， 并 测 
试 一 个。 为 此 ， 首 先 在 一 个 HTML 页面 中 添加 构造 国 数 Car， 
和 完成 前 一 页 的 练习 。 (CD 


这 是 我 们 使 用 的 代码 ， 请 随意 修改 和 扩展 。 








我 们 首先 使 用 这 个 构造 函 教 创建 
第 5 章 永 及 的 所 有 汽车 对 象 。 


Var chevy = new Car("Chevy", "Bel Air", 1957, "red", 2, false, 1021); 

Var cadi = new Car("GM", "Cadillac", 1955, "tan", 5, false, 12892); 

var taxi = new Car("Webville Motors", "Taxi", 1955, "yellow", 4, false, 281341); 
var fiat = new Car("Fiat", "500", 1957, "Medium Blue", 2, false, 88000); 


全 为 何 就 此 止步 呢 ? 


Var testCar = new Car("Webville Motors", "Test Car", 2014, "marine", 2, true, 21); 





人 


使 用 构造 函数 创建 新 对 象 非 第 容易 ， 你 注意 到 了 吗 ? 下 面 来 人 
这 


\ 万 有 民 一 
试 驾 一 下 这 些 汽车 。 汽车 或 虚构 的 汽车 。 
var cars = [chevy, cadi, taxi, fiat, testCarl]; JavaScript 控 制 全 
Chevy Bel Air goes zoom zoom! 
for(var i = 0; i < cars.length; i++) { Chevy Bel Air goes zoom zoom! 


cars[il].start(); GM Cadillac goes zoom zooml 


cars[i] .drive(); GM Cadillac goes zoom zooml 


cars[il.dqrive(); Webville Motors Taxi goes zoom zoom|! 


cars[i].stop(); Webville Motors Taxi goes zoom zoom! 


Fiat 500 goes zoom zoom! 


Fiat 500 goes zoom zoom! 


可 土 


吗 ?请 尝试 调 整 方法 的 调用 顺序 《如 在 调 ， 
方法 start 前 调用 方法 drive) ， 你 还 可 以 将 方 


法 drive 的 调用 次 数 设 罩 为 随机 的 3 


& 去 人 :全 
这 是 我 们 得 到 的 输出 。 你 添加 了 和 目 己 的 汽车 Webville Motors Test Car goes zoom zoom! 


Webville Motors Test Car goes zoom zooml 
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要 将 对 象 字 若 沿 展 


前 面 简 要 地 比较 了 对 象 构 造 国 数 和 对 象 字 面 量 ， 并 指出 了 对 象 字 面 量 依 
然 很 有 用 ， 但 你 没有 看 到 这 方面 的 示例 。 下 面 对 构造 国 数 Car 进 行 细微 
的 修改 ， 让 你 知道 在 什么 情况 下 通过 使 用 一 些 对 象 字 面 量 ， 可 让 代码 更 
整洁 ， 使 其 更 易于 阅读 和 维护 。 


再 来 看 一 眼 构 造 函 数 Ccar， 看 看 如 何 使 其 代码 更 整洁 。 


注意 到 我 们 使 用 了 大 量 的 形 深 加 的 形 参 越 多 ( 随 着 需求 的 增长 ， 总 是 
本 需要 这 样 做 ) ， 这 些 代码 阅读 起 来 越 因 难 。 





NS 2 


function Car(make, model, year, color, passengers, convertible, mileage) { 
this.make = make; 


this.model = model; 
this.year = year; 


this.color = color; 编写 调用 这 个 构造 函数 的 代码 时 ， 
this.passengers = passengers; 必须 按 正 确 的 顺序 指定 所 有 实 人参 。 


this.convertible = convertible; 
this.mileage = mileage; 
this.started = false; 


this.start = function() { 
this.started = true; 


上 
// 其 他 方法 


这 些 bug 为 何 难以 发 现 呢 ”因为 如 
这 里 的 问题 是 ， 构 造 函数 Car 包 含 大 量 的 形 参 二 另外 ， 果 你 颠倒 了 两 个 实 参 的 顺序 ， 代 
调用 这 个 构造 函数 的 代码 编写 起 来 也 比较 困难 。 这 看 似 只 是 小 小 的 不 便 ，\、 码 从 语义 上 看 像 是 正确 的 ， 却 不 
但 可 能 导致 的 pug 比 你 想象 得 多 ， 不 仅 如 此 ， 这 些 bug 还 常常 难以 发 现 。 人 


传递 大 量 实 参 时 ， 可 使 用 一 种 适用 于 任何 函数 的 常见 技巧 一 一 无 论 它 是 党 

规 函 数 还 是 构造 函数 。 这 种 技巧 的 工作 原理 如 下 ; 将 所 有 实 参 都 放 到 一 个 人 另外， 如 果 次 漏 了 一 个 
对 象 字面 量 中 ， 再 将 这 个 对 象 字面 量 传递 给 函数 。 这 将 通过 一 个 容器 (对 实 参 ， 将 引发 连锁 错误 | 
象 字 面 量 ) 传递 所 有 的 值 ， 从 而 不 必 操 心 实 参与 形 参 的 顺序 问题 。 


为 明白 其 中 的 工作 原理 ， 下 面 来 重新 编写 调用 构造 国 数 Car 的 代码 ， 再 稍 
微调 整 一 下 这 个 构造 国 数 的 代码 。 











用 对 象 字 面 量 蔡 代 实 参 


周一 个 对 象 字面 量 检 代 
所 有 实验 


对 于 调用 构造 函数 Car 的 代码 ， 用 一 个 对 象 字 面 量 蔡 代 所 有 的 实 参 : 


只 需 将 所 有 实 参 都 存储 到 对 象 字面 量 的 恰当 
属性 中 即 可 。 我 们 使 用 了 构造 函数 使 用 的 属 


性 名 。 / 


Var cadi = new Car("GM", "Cadillac", 1955, "tan", 5, false, 12892); 


) 这 里 按 原来 的 顺序 存 
var cadiParams = {make: "GM", 储 实验 J 
model: "Cadillac", 这 样 做 。 





year: 1955, 

color: "tan", 
passengers: 5, 
convertible: false, 


mileage: 12892}); 


因此 ， 对 于 调用 构造 函数 car 的 代码 ， 可 将 其 重 写 为 下 向 这 样 : 


var cadiParams = {make: "GM", 
model: "Cadillac", 
year: 1955, 
color: "tan", 忆 完成 了 重大 的 转 构 。 代码 不 
ee 仅 更 整洁 ， 阅 读 起 来 也 容易 
WA 得 多 ， 至 少 在 我 们 看 来 如 此 。 


convertible: falLse， 
mileage: 12892}); 


口 十 a _ 人 咏 2 
var Gadi new Carlcadiparams): < “现在 只 时 向 物 沁 罗 区 Car 从 证 一 个 交会， 





还 没完 ， 因 为 构造 函数 Car 本 身 依 然 要 求 癌 ES ， 而 
不 征 1 个 对 象 。 下 面 来 修改 构造 国 数 car 的 代码 ， 再 进 行 测试 
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修改 构造 铅 数 Ca 


现在 ， 需 要 删 endl 形 参 ， 用 所 传人 对 象 的 属性 
棕 代 。 我 们 将 把 这 个 形 参 命名 为 params。 为 使 用 这 个 对 象 ， 还 
需 对 这 个 构造 国 ee 如 下 所 示 : 





var cadiParams = {make: "GM", 
model: "Cadillac", 这 里 再 次 列 出 了 前 一 
year: 1955, a 
Color: "tan", / 


passengers: 5, 
convertible: false, 


mileage: 12892}; 


高 级 对 象 构造 技巧 


页 的 对 象 字面 


量 以 及 调用 构造 函数 Car 的 代码 。 


首先 ， 将 构造 函数 Car 的 7 个 人形 参 替换 为 


var cadi = new ee 用 于 表示 要 传 入 的 对 象 。 


function Car(params) { 


this.make = Params.make: 然后 ， 将 每 每 个 形 人 参 
< 替换 为 传递 
this.model = params.model; 人 一 引用 都 蔡 换 
this.year = params.year; 和 给 函数 的 对 象 的 相 


this.color = params.color; 


J 


= params.convertible; 


this.passengers = params.passengers; 
this.convertible 
this.mileage = params.mileage; 


this.started = false; 


在 方法 中 ， 没 有 直接 使 用 形 参 。 这 合 
因为 在 方法 中 应 总 是 
的 属性 。 因 此 ， 这 


this.start = 
this.started = 


function() { 

true; 

}; 

this.stop = 
this.started = 


yy 


function() { 
false; 
}; 
this.drive = 
if (this.started) { 
alert("Zoom zoom!"); 
} else { 


function() { 


alert("You need to start the engine first."); 


请 


乎 情理 ， 
通过 关键 字 this 使 用 对 象 


些 代码 无 需 作 任何 修改 。 


请 更 新 创建 cadi 和 其 他 
汽车 对 象 的 代码 ， 并 对 修 
改 后 的 代码 进行 测试 。 


cadi.start(); 
cadi.drive(); 
cadi.drive(); 


cadi.stop(); 
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天 于 类 型 的 问题 





: 续 司 - 


Var limoParams = {make: "Webville Motors", 


var limo = 
var limoDog 


将 构造 函数 Car 和 和 Dog 复制 到 


一 个 文件 中 ， 再 添加 下 面 的 代码 。 然 后 运 生 


这 个 文件 ， 并 将 其 输出 记录 下 来 。 


model: "limo", 


year: 1983, 


color: "black", 


passengers: 


12, 


构造 函数 Dog 的 代码 
可 在 第 530 页 找到 。 


convertible: true, 
mileage: 21120}; 


new Car(limoParams); 
= new Dog("Rhapsody In Blue", "Poodle", 40); 


console.log(limo.make + " " + limo.model + " is a "+ typeof limo); 
console.log(limoDog.name + " Is a " + typeof limoDog); 


假设 有 人 给 你 提供 了 


(Car, DogDSuperman) , 


型 相同 ， 请 问 运 算 符 typeof 外 


2— 将 输出 记录 在 这 蛙 。 


一 个 对 象 ， 而 你 想 确定 它 是 哪 种 类 型 的 对 象 


或 者 想 判断 它 是 售 与 另 一 个 对 象 的 关 
E 够 提供 帮助 吗 ? 


eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee ee ee 


世上 没有 
晶 敬 的 问题 


[35); 能 再 跟 我 说 说 typeof 是 做 什么 的 吗 ? 


® 
合 : 运算 符 typeof 返 回 其 操作 数 的 类 型 。 如 果 向 它 传 
字符 事 ， 它 将 返回 "string"; 如 果 向 它 传 递 一 个 


对 象 ， 


它 将 返回 "object",。 


你 可 以 向 它 传递 任何 类 型 : 


字 、 字 符 串 、 布 尔 值 或 对 象 和 函数 等 更 复杂 的 类 型 。 
而 ，typPpeof 不 会 提供 更 具体 的 信息 ， 比 如 指出 对 象 是 小 狗 
对 象 还 是 汽车 对 象 。 
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数 
处 


[9): s 既然 typeof 不 会 指出 对 象 是 小 狗 对 象 还 是 汽车 对 
象 ， 如 何 确定 对 和 象 是 哪 种 类 型 的 呢 ? 


A 

只 ”，Java 和 C++ 等 很 多 其 他 面向 对 象 的 语言 者 有 严格 的 
对 象 类 型 概念 。 在 这 些 语言 中 ， 你 可 以 确定 对 象 到 底 是 哪 
种 类 型 的 。 但 JavaScript 以 更 动态 、 更 宽松 的 方式 处 理 对 象 
及 其 类 型 。 有 鉴于 此 ， 很 多 开发 人 员 认 为 JavaScript 的 对 象 
系统 不 那么 强大 ; 可 实际 上 ， 其 对 象 系统 更 宽泛 、 更 灵活 。 
鉴于 JavaScript 的 类 型 系统 更 动态 ， 要 确定 对 象 是 否 是 小 狗 
或 汽车 更 难 些 : 这 取决 于 你 对 小 狗 或 汽车 的 定义 。 然 而 ， 
有 男 一 个 运算 符 可 提供 更 详细 的 信息 。 要 知道 是 哪个 运算 
符 ， 请 接着 往 下 看 。 


高 级 对 象 构造 技巧 


理解 对 象 突 例 


你 无 法 通过 观察 确定 JavaScript 对 象 是 哪 种 类 型 的 对 象 ， 如 小 狗 或 汽车 。 在 JavaScript 中 ， 
对 象 是 一 个 动态 的 结构 ， 无 论 对 象 包 含 哪 些 属性 和 方法 ， 其 类 型 都 是 object。 不 过 ， 如 
果 知 道 对 象 是 由 哪个 构造 函数 创建 的 ， 就 能 获悉 一 些 有 关 它 的 信息 。 


别 忘 了 ， 每 当 你 使 用 运算 符 new 调 用 构造 国 数 时 ， 各 将 创建 一 个 新 的 对 象 实例 。 因此 ， 如 
果 你 使 用 构造 图 数 Car 创 建 一 个 对 象 ， 这 个 对 象 就 是 汽车 ; 更 准确 地 说 ， 这 个 对 象 就 是 一 
个 car 实 例 。 








实例 1 实例 2 


y Y 





人 个 构造 范 数 创 
建 的 ， 因 此 可 以 认为 它们 是 相同 类 
个 你 知道， 每 个 实例 都 有 一 组 独特 的 属性 值 ， 但 使 se 
用 构造 函数 Car 创 建 的 对 象 都 是 Car 实 例 。 


说 对 象 是 某 个 构造 函数 的 实例 并 非 纸 上 谈 兵 ， 实 际 上 ， 可 以 在 代码 中 使 用 运算 
instanceof 来 确定 对 象 是 由 哪个 构造 函数 创建 的 。 来 看 一 些 代 码 : 


Var cadiParams = {make: "GM", model: "Cadillac", year: 1955, color: "tan", 
passengers: 5, convertible: false, mileage: 12892}; 


di = C diP ;> 
var cadi new Carl(cadiParams) 加 果 对 象 是 由 指定 的 构造 函数 创建 


的 ， 运 算 符 instanceof 将 返 @true。 
if (cadi instanceof Car) { 


. console.log("Congrats, it's a Car!"); 在 这 里 ， 我 们 说 对 象 cadi 是 构造 
} 了 菠 数 Car 他 建 的 一 个 实例 。 


实际 上 上， 创建 对 象 时 ， 运 算 符 new 在 幕后 存储 了 一 些 信息 ， 让 你 随时 都 能 确定 对 象 
是 由 哪个 构造 图 数 创 建 的 。 运 算 符 instanceof 了 就 是 根据 这 些 信息 来 确定 对 象 是 否 
是 指定 构造 图 数 的 实例 。 








情况 比 这 里 描述 的 要 复杂 些 ， 这 将 在 下 一 章 讨论 。 
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instanceof 的 练习 





function dogCatcher(ob]) { 


我 们 需要 一 个 名 为 aogCatcher 的 函数 ， 它 在 传 入 的 对 象 是 小 狗 时 返回 true， 
可 否则 返回 false。 请 编写 这 个 函数 ， 并 使 用 下 面 的 代码 进行 测试 。 接 着 往 下 阅读 
-< 一- 前 ， 别 忘 了 查看 本 章 末尾 的 答案 ， 看 看 你 编写 的 代码 是 否 正确 。 


在 这 里 编写 实现 函数 


_ dogCatcher 的 代码 。 
} 
一 这 是 测试 代码 。 

function Cat(name, breed, weight) { 

this.name = name; 

this.breed = breed; 

this.weight = weight; 
} 
Var meow = new Cat("Meow", "Siamese", 10); 
var whiskers = new Cat("Whiskers", "Mixed", 12); 
var fido = {name: "Fido", breed: "Mixed", weight: 38}; 


function Dog(name, breed, weight) { 
this.name = name; 
this.breed = breed; 
this.weight = weight; 
this.bark = function() { 
if (this.weight > 25) { 
alert(this.name + " says Woof'!"); 
} else { 
alert(this.name + " says Yip'"); 


}; 
Var fluffy = new Dog("Fluffy", "Poodle", 30); 


var SPot = new Dogl("Spot", "Chihuahua", 10); 
[meow, whiskers, fido, fluffy, spot]; 


var dogs 


for (var i = 0; i < dogs.length; I++) { 
if (dogCatcher(dogs[i])) { 
console.log(dogs[i].name + " is a dog!"); 
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如 果 对 象 是 使 用 构造 号 数 Dog 创 建 的 ， 


它 就 是 小 狗 ， 否 则 就 不 是 ? 





是 的 ， 原 理 就 是 这 样 的 。JavaScript 没 有 严格 意义 上 的 
对 象 类 型 。 如 末 要 比较 两 个 对 象 ， 看 它们 是 否 都 是 小 
猫 或 小 狗 ， 可 检查 它们 是 否 是 以 相同 的 方式 (即使 用 
相同 的 构造 函数 ) 创建 的 。 前 面 说 过 ， 小 猫 之 所 以 是 
小 猫 ， 是 因为 它 是 由 构造 国 数 Cat 创 建 的 ， 而 小 狗 之 所 
以 是 小 狗 ， 是 因为 它 是 由 构造 国 数 Dog 创 建 的 。 


在 下 一 章 ， 你 将 看 到 ，JavaScript 构 造 函 数 和 对 象 比 你 
知道 的 还 要 灵活 。 例 如 ， 对 于 使 用 构造 国 数 Taxi 创 建 
的 对 象 ， 我 们 可 以 知道 它 也 是 汽车 。 现 在 只 需 了 解 这 一 
点 即 可 ， 本 书后 面 将 更 详细 地 介绍 。 
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修改 用 构造 函数 创建 的 对 象 


即便 是 创建 好 的 对 象 ， 也 可 以 有 
独特 的 属性 

我 们 花 了 很 大 的 篇 幅 讨 论 如 何 使 用 构造 图 数 来 创建 一 致 的 对 象 ， 即 包含 相同 
属性 和 方法 的 对 象 ， 但 没有 提 到 这 样 一 点 : 使 用 构造 函数 创建 对 象 后 ， 可 对 
其 进行 修改 ， 因 为 使 用 构造 函数 创建 的 对 象 是 可 以 修改 的 。 


这 到 底 是 什么 意思 呢 ?” 回 忆 一 下 ， 介 绍 对 象 字 和 面 量 时 我 们 演示 过 ， 可 在 对 象 
创建 后 增删 其 属性 。 对 于 使 用 构造 函数 创建 的 对 象 ， 也 可 这 样 做 。 








使 用 构造 函数 Dog 创 建 
的 小 狗 对 象 fido。 


A 


Var fido = new Dog("Fido", "Mixed", 38); 
要 给 这 个 对 象 添 加 新 属性 ， 
需 给 这 个 新 属性 赋值 即 可 。 


-a 也 可 使 用 运算 符 delete 人 删除 既 有 的 属性 


~ 


\ 


fido.owner = "Bob"， 


delete fido.weight; 


如 琳 愿 意 ， 还 可 添加 新 方法 : 
要 添加 新 方法 ， 只 需 将 这 个 方法 赋 给 一 个 


a 新 属性 。 


fido.trust = function(person) { 
return (person === "Bob"); 


}; 
改 、 使 用 的 是 医 名 国 数 | 看 到 了 
o 吧 ， 匿 名 函数 无 处 不 在 | 


请 注意 ， 这 只 修改 了 对 象 fido。 如 果 给 对 和 象 fido 添 加 一 个 方法 ， 屠 
么 只 有 fido 对 和 象 有 这 个 方法 ， 其 他 小 狗 对 家 都 不 会 包含 这 个 方法 : 
这 行 代码 设 问题 ， 因 为 fido 对 象 包 合 方 
var notBite = fido.trust("Bob"); < 法 trust。 因 此 ，notBite 的 值 为 true。 


将 引发 错误 如 下 错误 : TypeError: Object #<Dog> has 


nomethod “trust ” 。 


Var SPot = new Dog("Spot", "Chihuahua", 10); 这 些 代 码 行 不 通 ， 因为 spot 对 象 设 有 方法 trust。 这 
notBite = spot.trust("Bob"); 
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那么 ， 对 创建 的 汽车 对 象 进 行 修改 后 ， 
包 还 是 汽车 对 象 吗 ? 


是 的 ， 修 改 汽车 对 象 后 ， 它 依然 是 汽车 对 象 。 也 就 是 说 ， 如 果 检 
查 这 个 对 象 是 否 是 Car 实 例 ， 管 案 是 肯定 的 。 例 如 ， 如 果 我 们 创建 
一 个 旋 车 对 角 : 


Var cadiParams = {make: "GM", model: "Cadillac", 
year: 1955, color: "tan", 
passengers: 5, convertible: false, 
mileage: 12892}; 


Var cadi = new Carl(cadiParams); 


可 添加 新 属性 chrome， 并 删除 属性 convertible: 


cadi.chrome = true:; 


delete cadi.convertible; 


但 对 象 cadi 依 然 是 汽车 对 象 : 


3 亿 “十 田 ， 
cadi instanceof Car 结果 为 true。 


从 现实 意义 上 说 ，cadqi 还 是 汽车 吗 ? 如 果 我 们 删除 这 个 对 象 的 所 
有 属性 ， 1 运算 符 instanceof 说 是 ， 但 从 你 的 标 


二 ~ ， 一 一 一 人 

Ut 准 判断 来 看 ， 它 可 能 不 是 . 

的 大 士 故 ” 网 

的 时 ， 指 的 就 是 芝 ， 你 不 会 使 用 构造 国 数 来 创建 一 个 对 象 ， 再 将 它 修 改 得 面目 


pe 看 起 来 根本 不 像 是 使 用 这 个 构造 函数 创建 的 。 一 般 而 言 ， 
你 使 用 构造 函数 来 创建 相当 一 致 的 对 象 ， 但 如 琳 你 希望 对 象 更 灵 
活 ，JavaScript 也 提供 了 这 样 的 支持 。 作 为 代码 设计 人 员 ， 由 你 决 
定 如 何以 你 和 同事 认为 合理 的 方式 使 用 构造 函数 和 对 象 。 
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日 期 对 象 










这 些 内 置 对 象 确实 能 够 节省 时 间 。 
现在 ,我 每 天 下 班 都 很 里 ， 则 到 家 都 
能 看 上 一 段 人 《黄金 女郎 》 了 。 






内 著 构 选号 数 


JavaScript 自 带 了 一 系列 构造 函数 ， 可 用 于 实例 化 一 些 便 利 的 对 象 ， 如 
知道 如 何 处 理 日 期 和 时 间 的 对 象 、 擅 于 在 文本 中 查找 模式 的 对 象 以 及 站 
履 你 对 数组 的 认识 的 对 象 。 你 知道 构造 国 数 的 工作 原理 ， 还 知道 关键 字 
new 的 用 法 ， 完 全 可 以 使 用 这 些 构造 国 数 一 一 更 重要 的 是 它们 创建 的 对 
象 。 下面 简要 地 介绍 两 个 这 样 的 构造 函数 ， 为 你 自行 探索 它们 作 好 充分 
准备 。 

下 面 先 来 看 看 JavaScript 内 置 的 日 期 对 象 。 要 创建 日 期 对 象 ， 只 需 使 用 其 
构造 国 数 即 可 : 





/一 新 建 一 个 表示 当前 日 期 和 


var now = new Date():; 时 间 的 日 期 对 象 。 


构造 国 数 Date 返 回 一 个 表示 本 地 当前 日 期 和 时 间 的 Date 实 例 。 有 了 日 
期 对 象 后 ， 便 可 使 用 其 方法 来 操作 日 期 和 时 间 ， 还 可 获取 其 各 种 属性 。 
下 面 定 几 个 这 样 的 示例 : 








var datestring = now.tostring(); AT ~ “Thu Fep 06 2014 17:29:29 
GMTO800 (PST) 。 


var theYear = now.getFullYear(); 


玉 、_ 把 99 期 中 的 年 份 


的 是 星期 几 ， 如 1 (表示 星期 一 ) 


O 


通过 向 构造 函数 Date 传 递 额外 的 实 参 ， 可 轻松 地 创建 表示 任何 日 期 和 
时 间 的 日 期 对 象 。 例 如 ， 要 创建 一 个 表示 1983 年 5 月 1 日 的 日 期 对 象 ， 可 


像 下 面 这 桩 做 : 
4~ 可 像 这 样 向 构造 函数 传递 一 个 表示 
var birthday = new Date("May 1, 1983"); 日 期 的 简单 字符 串 。 


还 可 在 传 入 的 字符 串 中 包含 时 间 ， 从 而 创建 更 具体 的 日 期 对 象 : 
var birthday = new Date("May 1, 1983 08:03 pm"); 二 一 在 传 入 的 字符 串 中 包含 时 间 。 


这 里 只 简要 地 介绍 了 日 期 对 象 ， 要 详尽 地 了 解 其 属性 和 方法 ， 请 参阅 
《JavaScript 权 威 指南 》 。 
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数组 对 象 
下 面 介 绍 另 一 个 有 趣 的 内 置 对 象 ; 数组 对 象 。 本 书 前 面 创建 数组 时 ， 使 用 的 都 是 
方 括号 表示 法 ([1，2，3]) ， 但 也 可 以 使 用 下 面 的 构造 国 数 来 创建 : 


new Array () & 巡 一 创建 一 个 长 度 为 零 的 空 数 组 。 


var emptyArray = 


述 代码 新 建 了 一 个 空 数组 。 然 后 ， 可 随时 像 下 面 这 样 添加 元 素 : 


~ 人 本 书 前 面 给 
emptyArray[0] = 99; 数组 添加 元 素 时 ， 都 是 这 样 做 的 。 


还 可 创建 特定 长 度 的 数组 对 象 。 假 设 要 创建 一 个 包含 3 个 元 素 的 数组 : 


Var oddNumbers = new Array(3); 


创建 一 个 长 度 为 5 的 数组 ， 由 使 


oddNumbers[0] = 1 ed 人 
/L 

oddNumbers[1] = 3; 

oddNumbers[2] = 5 


这 里 创建 了 一 个 长 度 为 3 的 数组 。 了 刚 创 建 时 ， 数 组 cqqNumbers 的 3 个 元 素 是 未 
定义 的 ， 但 随后 给 每 个 元 素 都 设置 了 值 。 如 果 愿 意 ， 可 在 这 个 数组 中 轻松 添加 更 
多 的 元 素 。 

你 对 这 些 都 不 应 该 感到 陌生 。 数 组 对 象 最 有 趣 的 地 方 是 包含 一 系列 方法 ， 你 已 


知道 了 数组 的 方法 sort， 下 面 是 其 他 几 个 有 趣 的 方法 : 
挖 相反 的 顺序 排列 数组 的 所 有 元 素 (现在 数组 oddNumber 


#6 
ress 3 和 1) 。 请 注意 ， 立 这 个 方法 修改 原始 数组 。 


| 一 方法 join 将 数组 oddNumbers 中 的 值 合并 成 一 
符 串 (这 里 在 值 之 间 加 上 -) ， 并 返回 这 个 字符 


var aString = oddNumbers.join(" - "); 串 。 因 此 ， 这 将 返回 字符 串 “5-5-1 











oddNumbers.reverse(); 


var areAllOdd = oddNumbers.every(function(x) { 方法 every 将 一 个 个 邮 M 作 为 全 
义 


隐 对 于 数组 中 

return ((x %$ 2) !== 0); 人 、 的 每 个 值 ， 都 调用 这 个 ee 

本 返回 的 值 是 true 还 ee 0 果 对 于 所 有 的 元 
素 ， 这 个 函数 都 返 @true， 部 么 方法 every 将 返 


G@Otrue 。 


文 里 只 涉及 数组 对 象 的 冰山 一 角 ， 但 就 本 书 而 言 ， 这 些 知识 足够 了 。 同 样 ， 要 全 
面 了 解 对 象 数 组 ， 请 参阅 《JavaScript 权 威 指 两》。 
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创建 数组 的 两 种 方式 







可 是 ,本 书 前 面 创建 数组 时 ， 
使 用 的 方法 截然 不 同 。 


好 眼力 。 本 书 前 面 创建 数组 时 ， 使 用 的 都 是 方 括号 表示 法 ([]) ， 这 实 
际 上 是 直接 使 用 构造 函数 Array 的 简写 。 请 看 下 面 两 种 创建 空 数组 的 方式 ， 
它们 是 等 价 的 : 

这 两 种 方式 等 价 。JavaScript 语 言 
支持 方 括号 表示 法 ， 生 在 让 你 能 够 
var items = []; ee -一 更 轻松 地 创建 数组 。 


var items = new Array(); A— 


司 样 ， 尔 编 写 下 可 代 人 ， ， 
同样 ， 如 果 你 编写 下 面 的 代码 上 ”我们 称 之 为 数组 字面 量 


五 、 
var items = ["a", "b", "c"]; 冶 计 。 
这 不 过 是 另 一 种 使 用 构造 国 数 的 方式 的 简写 : 
var Items = new Array("a", "b", "c"); 
人 ”如 果 传 和 了 多 个 实 参 ， 创 建 的 教 组 将 以 这 些 值 


作为 元 素 。 


使 用 字面 量 表 示 法 和 构造 函数 创建 的 对 象 没 什么 两 样 。 无 论 使 用 哪 种 方 
式 创建 对 象 后 ， 都 可 使 用 其 方法 。 

你 可 能 会 同 ， 为 何 要 使 用 构造 函数 (而 不 是 字面 量 表 示 法 ) 来 创建 数组 
呢 ? 需 要 创建 在 运行 阶段 确定 的 特定 长 度 的 数组 ， 再 在 该 数组 中 添加 元 





var n = getNumberOfWidgetsFromDatabase(); 


var widgets = new Array(n); 这 些 代码 可 能 创建 一 个 很 
for(var i=0; i < n; i++) { 大 的 数组 ， 其 长 度 要 等 到 


widgets[i] = getDatabaseRecord(i); 运行 阶段 才 知道 。 
} 


创建 简单 数组 时 ， 使 用 数组 字面 量 语法 的 效 来 很 好 ， 但 创建 要 等 到 运行 
阶段 才能 确定 长 度 的 数组 时 ， 使 用 构造 函数 Array 更 合适 。 你 可 以 根据 
需要 使 用 其 中 任意 一 种 方式 ， 也 可 结合 使 用 这 两 种 方式 。 
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除了 日 期 和 数组 外 ，JavaScript 还 包含 很 多 其 他 的 内 置 对 象 ， 它 们 有 时候 可 能 为 你 提 
供 很 大 的 便利 。 下 面 列 出 了 其 中 的 几 个 。 如 果 你 对 其 他 内 置 对 和 象 感 兴 趣 ， 可 在 网 上 搜 


索 “JavaScript 标 准 内 置 对 象 ”。 


Obhjec 


















索 非 常 复杂 的 模式 。 


》 

加 ) ; 我 不 太 明 自 构造 函数 Date 和 和 
Array 的 工作 原理 。 它 们 好 像 支持 零 
个 或 更 多 的 实 参 。 就 拿 Date 来 说 吧 ， 
如 果 没 有 提供 任何 实 参 ， 它 将 返回 当 
前 日 期 ， 但 也 可 以 通过 传 入 实 参 来 指 
定 其 他 的 日 期 。 这 是 如 何 实现 的 呢 ? 


A 

只 ,好 了 眼力。 可 编写 根据 实 参 数量 
执行 不 同 操作 的 函数 。 就 拿 构造 函数 
Array 来 说 吧 ， 如 果 没 有 传 入 任何 实 参 ， 
它 将 创建 一 个 空 数 组 ; 如 果 传 入 了 一 
个 实 参 ， 它 就 认为 该 实 参 指定 的 是 数 
组 的 长 度 ; 如 果 有 多 个 实 参 ， 它 就 认 
为 这 些 实 参 指定 的 是 元 素 的 初始 值 。 


人 
吕 ) :在 自己 编号 的 构造 函数 中 ， 也 可 
以 这 样 做 吗 ? 


VA@ A 

办， 当然 可 以 。 这 方面 的 知识 我 们 没 
有 介绍 过 : 在 每 个 函数 中 ， 都 有 一 个 
arguments 对 象 ， 其 中 包含 传递 给 该 
函数 的 所 有 实 参 。 你 可 使 用 这 个 对 象 
来 确定 传 入 了 哪些 实 参 ， 进 而 采取 相 


+ 你 可 使 用 构造 本 数 Object 来 创建 对 
象 。 与 数组 一 样 ， 对 象 字 面 量 表示 | 
法 人 { 与 new Object() 等 价 。 
本 书后 面 更 详细 地 介绍 。 


RegExp 使 有 这 个 构造 免 数 可 创建 正则 表 | 
达 式 对 象 ， 让 你 能 够 在 文本 了 中搜 | 


这 将 在 | 












Error 


供 





世上 没有 

昌 项 的 问题 
应 的 措施 (有 关 argduments 对 象 的 详 
细 人 信息， 请 参阅 附录 ) 。 另 外 ， 还 可 
通过 检查 这 个 对 象 来 确定 哪些 形 参 是 
未 定义 的 。 


. 8 

[oh :本 书 前 面 使 用 了 wath， 但 使 用 
前 为 何不 需要 使 用 new Math 来 创建 
Math 对 和 象 呢 ? 

A . 

只 ， 问 得 好 。 实际 上 ，Math 并 非 构 
造 串 数 ， 其 至 不 是 池 数 ,而 是 一 个 对 
象 。 你 知道 ，Math 是 一 个 内 置 对 象 ， 
可 用 来 获取 pi 的 值 (使 用 Math.PI) 、 
生成 随机 数 (使 用 Math.random) 
等 。 可 将 Math 视 为 一 个 包含 一 系列 属 
性 和 方法 的 对 象 字面 量 ， 可 供 你 编写 
JavaScript 代 码 时 随时 使 用 。Math 的 首 
字母 之 所 以 大 写 ， 是 为 了 让 你 知道 它 
是 JavaScript 内 置 的 。 


上 9) :我 知道 如 何 检查 对 象 是 否 是 使 用 
特定 构造 函数 创建 的 ， 但 如 何 编写 代 
码 以 判断 两 个 对 象 是 否 是 使 用 同一 个 
构造 函数 创建 的 呢 ? 


Math 入 个 对 象 包 含 用 于 执行 数学 运 
算 任 务 的 属性 和 方法 ， 如 Math. | 
PI 和 Math.random()。 


这 个 构造 咏 数 创建 标准 错误 对 
象 ， 为 你 在 代码 中 捅 获 错误 担 | 
3 极 大 的 便利 。 










AAA ， 

只 ”要 判断 两 个 对 象 是 否 是 使 用 同一 

个 构造 隙 数 创建 的 ， 可 像 下 面 这 样 做 : 

((fido instanceof Dog) && 
(spot instanceof Dog)) 

如 果 这 个 表达 式 的 结果 为 true， 就 说 

明 fidqo 和 spot 有 是 使 用 同一 个 构造 孔 

数 创建 的 。 


2 

人 o] ; 如 果 使 用 对 象 字面 量 来 创建 对 
条 ， 它 将 是 哪个 构造 函数 的 实例 呢 ? 
还 是 说 它 不 是 任何 构造 函数 的 实例 ? 


A 和 

只 "对象 字面 量 是 0bject 的 实例 ， 
可 将 Object 视 为 用 于 创建 最 通用 的 
JavaScript 对 象 的 构造 逊 数 。 下 一 章 将 
更 深入 地 寺 论 Object 在 JavaScript 对 象 
系统 中 所 处 的 位 置 。 


制造 对 象 的 练习 








保险 杜 








WR 

Re Re an ee 
Ri ad nin Wamp en 
ee A i 
是 蓝 色 的 ? 没 问 题 ， 自 己 去 定制 好 了 。 想 装备 高 级 立 
声 系 统 ?” 没 问题 ， 添 加 就 是 了 。 
现在 给 你 一 个 机 会 ， 设 计 一 辆 你 心目 ee 
在 下 面 创建 一 个 CarPrototype 对 象 ， Cn 0 
你 梦 中 以 求 的 汽车 。 继 续 往 下 阅读 前 ， 请 查看 我 们 在 
章 末 尾 提供 的 设计 。 





function CarProtoyPe() { 
this.make = "Webville Motors":; 

this.year = 2013; 

this.start = function() 1 

this.stop = function() tessds 

this.drive = function() {...}; 







pb 
这 有 什么 用 途 呢 ? ev 
就 会 知道 了 ! 顺便 说 三， 
本 章 到 这 里 就 结束 了， 下 
中 忘 了 要点 和 填 字 游 双 ， 


< 在 这 里 定制 原型 车 。 
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需要 创建 少量 对 象 时 ， 适 合 使 用 
对 象 字面 量 。 

需要 创建 大 量 类 似 的 对 象 时 ， 适 
合 使 用 构造 函数 。 


构造 函数 是 使 用 运算 符 new 进 行 
调用 的 函数 。 根 据 约 定 ， 将 构造 
函数 名 的 首 字 母 大 与 。 


使 用 构造 函 效 可 创建 包含 相同 属 
性 和 方法 的 一 致 对 象 。 


要 创建 对 象 ， 可 使 用 运算 符 new 
调用 构造 函数 。 


使 用 new 来 调用 构造 函数 时 ， 将 
新 建 一 个 空 对 象 ， 并 在 构造 函数 
中 将 其 赋 给 this。 


在 构造 函数 中 ， 可 使 用 this 来 
访问 正在 创建 的 对 象 ， 进 而 给 它 
添加 属性 。 

构造 函数 自动 返回 它 创建 的 新 对 
象 。 


高 级 对 象 构造 技巧 


调用 构造 函数 时 ， 如 果 忘 记 使 用 
new， 将 不 会 创建 任何 对 象 。 这 
将 导致 难以 调试 的 错误 。 

要 定制 对 象 ， 可 向 构造 函数 传递 
实 参 ， 并 使 用 这 些 值 来 初始 化 要 
创建 的 对 象 的 属性 。 


如 果 构 造 函 数 有 很 多 形 参 ， 应 考 
虑 将 它们 合并 为 单个 对 象形 参 。 


要 判断 对 象 是 人 否 是 使 用 特定 构 
造 函数 创建 的 ， 可 使 用 运算 符 


instanceof, 


与 对 象 字 面 量 一 样 ， 也 可 对 使 用 
构造 函数 创建 的 对 象 进 行 修改 。 


JavaScript 自 带 很 多 构造 函数 ， 
可 使 用 它们 来 创建 很 有 用 的 对 
象 ， 如 日 期 对 象 、 正 则 表达 式 和 
数组 。 
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高 


横 回 
2. 构造 国 数 是 什么 ? 


7. 一 个 构造 函数 ， 想 将 生日 存储 在 变量 中 时 需要 用 到 
es 


9. 构造 函数 包含 大 量 的 。 时 ， 可 使 用 一 个 对 象 
字面 量 来 癌 它 传递 实 参 。 


10. 使 用 构造 国 数 来 创建 对 绷 时 ， 我 们 说 这 个 对 象 坪 
构造 国 数 的 一 个 什么 ? 


11. 构造 函数 有 点 像 制作 什么 的 模子 ? 
14. 构造 函数 返回 新 创建 的 什么 ? 


15. 调用 构造 国 数 时 ， 如 采 挟 记 使 用 new， 可 能 出 现 的 
错误 类 型 。 
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于 访 JavaScript 烷 党 游戏 


请 完成 下 面 的 填 字 游戏 ， 让 新 学 的 知识 深 深 地 印 在 脑海 中 。 


纵 问 

1. 构造 畏 数 有 点 像 什 么 ? 

3. 对 于 使 用 ”创建 的 对 象 ， 可 随时 给 它 添 加 属性 。 
4. new 不 是 公关 高 手 ， 而 只 是 一 个 什么 ? 

5. Web 镇 汽车 制造 公司 试 芍 车 的 颜色 。 

6. 使 用 构造 函数 ， 可 让 所 有 汽车 的 什么 都 相同 ? 

8. 绝 不 要 将 什么 放 在 笔记 本 电脑 上 方 ? 

12. 1imo 和 1imoDog 的 什么 是 相同 的 ? 

13. 使 用 构造 函数 创建 对 象 时 ， 需 要 使 用 哪个 运算 符 ? 


高 级 对 象 构造 技巧 


j 





答 


我 们 需要 你 的 帮助 。 我 们 以 前 一 直 使 用 对 象 字面 量 来 创建 鸭子 对 象 。 利 用 刚 


学 到 的 知识 ， 你 能 否 为 我 们 编写 一 个 创建 鸭子 对 象 的 构造 函数 ”下面 是 我 们 
使 用 的 一 个 对 象 字 面 量 ， 你 可 以 据 此 来 编写 构造 函数 。 答 案 如 下 。 
var duck = { function Duck(type, canF]y) { 
type: "redheaded", this.type = type; 


San yy True this.canFl]ly = canFly; 


编写 一 个 创建 鸭子 对 } 
象 的 构造 函数 。 
一 个 鸭子 对 象 字面 量 ， 备注 : 我 们 知道 你 还 没有 完全 明 自 构造 函数 的 


工作 原理 ， 现 在 请 暂时 将 重点 放 在 语法 上 。 


function Dog(name, breed, weight) { 





1 下 面 来 做 一 个 简单 的 练习 ， 帮 助 你 
ES = ese 完全 消化 这 些 知识 。 请 将 左边 的 代 
人 码 加 入 一 个 网 页 中 ， 再 进行 测试 ， 
} 并 将 输出 记录 在 下 面 。 
Var fido = new Dog("Fido", "Mixed", 38); ) 


Var fluffy = new Dog("Fluffy", "Poodle", 30); 
Var SPot = new Dog("Spot", "Chihuahua", 10); 





var dogs = [fido, fluffy, spot]; JavaScript 控 制 全 
for (var i = 0; i < dogs.length; i++) { Dog: Fido is a large Mixed 
var size = "small"; Dog: Fluffy is a large poodle 
if (dogs[i].weight > 10) { Dog: Spot is a small Chihuahua 
size = "large"; 
} 
console.log("Dog: " + dogs[I].name 
+" ijsa" + size 
+ " "+ dogs[il].breed); 
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练习 答案 


变 身 浏 览 器 


下 面 的 JavaScript 代 码 存 在 一 些 错误 ， 你 的 任务 是 变 身 浏览 器 ， 将 
这 些 错 误 找 出 来 。 管 案 如 下 。 






如 0 果 要 将 widget 用 作 构造 函数 ， 就 需 
要 将 首 字母 大 写 。 采用 小 写 不 会 导致 
错误 ， 但 最 好 遵守 将 构造 范 数 名 疾 子 


母 大 写 的 约定 。 

在 this 前 面 无 需 使 用 function widget(partNo, size) { 
var。 议 里 是 给 对 名 ”一 3》 var this.no = partNo; 入 于 汪汪 
0 >, Var this.breed = size; Os 根据 约定 ， 通 弟 让 形 参 与 属性 同名 。 © 
声明 新 变量 疯 此 ， 改 为 this.partNo 和 this.size 可 能 更 合适 。 

小 [又 里 。 } 

的 是 各 function FormFactor(material, widget) { 

这 里 使 用 四 下 并 Lal ee 
号 而 不 是 分 号 oO this.material material, 这 里 返回 This, 这 没有 必要 构造 
中 记 了 ， 在 构造 一 this.widget = po 函数 会 目 动 完成 这 项 任务 。 这 条 语句 
函数 中 ， 应 使 用 return this; 不 会 导致 错误 ， 但 它 是 多 余 的 。 
党 规 语句 ， 而 不 
中 失色 分 缠 的 } 
是 用 但 互 站 员 
属性 名 / 值 对 。 


-~ 遗漏 了 new| 


widget(100, "large"); 


var widgetA 


var widgetB = new widget(101, "small"); 
new 和 构造 函数 一 一 > var formFactorA = newFormFactor("plastic", widgetA); 
名 之 间 必 须 有 一 


var formFactorB = new ForumFactor("metal", widgetB); 
人 安 
| 工 4。 


C 


构造 范 数 名 的 拼写 不 正确 
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滞 | 


houseBlend 。 


我 们 创建 了 
两 个 咖啡 对 
象 。 调 用 方 
法 toString， 
并 显示 它 返 


回 的 字符 串 。 


一 3 
起 了， 表示 方法 被 
凋 用 的 对 象 。 因 此 ， 如 
果 我 们 调用 houseBlend. 
5ize，this 将 为 对 象 


高 级 对 象 构造 技巧 


有 人 给 我 们 提供 了 一 个 点 咖啡 的 构造 函数 ， 但 没有 定义 方法 。 一 
我 们 需要 方法 getsize， 它 根据 加 入 的 咖啡 量 返回 一 个 字符 说 2 一 一 
| Ew 


四 ”咖啡 量 为 8 瞧 司 时 返回 small; 
咖啡 量 为 12 耸 司 时 返回 mediunm; 
咖啡 量 为 16 上 崎 司 时 返回 large。 
我 们 还 需 


需要 方法 toString， 它 返回 


一 个 字符 上 忠 ? 指出 


你 号 的 是 哪 种 咖啡 。 


请 补 全 下 面 的 代码 ， 再 在 浏览 絮 中 进行 测试 。 妾 试 护 几 杯 大 小 各 寞 的 咖 
啡 。 答 案 如 下 。 
function Coffee(roast, ounces) { 
this.roast = roast; 
this.ounces = ounces; 方法 getSize 查 看 对 象 的 属性 
this.getSize = function() { ounces; 并 诅 把 回 相 应 的 字符 
if (this.ounces === 8) { 
return "small"; 
} else if (this.ounces === 12) { 
return "medium"; 
} else If (this.ounces === 16) { 
return "large"; 4 字 特 
. 流 回 一 个 描述 对 象 的 字 付 
- eto 到 和 的 大 小 


this.toString = function() { 


return “You've ordered a " 
+ this.roast 十 " 


var houseBlend 


= 
console.log(houseBlend.toString()); 


vo darkRoast = 
console.log(darkRoast.toString()); 


这 是 我 们 到 的 输出 。 
到 的 输出 应 与 此 类 似 。 


= new Coffee("House Blend", 


new Coffee("Dark Roast", 


+ this.getSize() + " " 


coffee.": 


12); 
JavaScript 控 制 全 
You've ordered a medium Ho 
use 
16); Blend coffee. 


You've ordered a large Dark 
Roast coffee. 


你 得 
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练习 答案 


请 利用 你 学 到 的 知识 创建 一 个 car 构 造 函数 。 建 议 你 采取 如 下 步 又。 


@ 首先 ， 指 定 关键 字 function (这 项 工作 我 们 已 经 蔡 你 完成 了 ) 和 构造 函数 
名 。 再 指定 形 参 : 对 于 每 个 要 为 其 提供 初始 值 的 属性 ， 都 需要 一 个 形 参 。 





@ 接 下 来 ， 给 对 象 的 每 个 属性 设置 初始 值 (务必 结合 使 用 属性 名 和 关键 字 
a 


@ 最后， 添加 三 个 方法 : start、drive 和 stop。 


> > 个 2 叙 分 | \ 
构造 函数 名 为 Car。 7 个 形 参 ， 分 别 对 应 
V \ ”于 7 个 要 定制 的 属性 


function Car(make, model, year, color, passengers, convertible, mileage) { 


© this.make = make; 在 新 的 汽车 对 象 中 ， 把 要 根据 形 参 定制 本 
每 个 属性 都 设置 为 与 相应 的 形 参 同名 。 这 


this.model = model; ps 
this.year = year; 里 按照 约定 ， 让 属性 和 形 参 同名 。 


this.color = color; 
this.passengers = passengers; 

this.convertible = convertible; 
this.mileage = mileage; 


二 一 一 将 属性 started 初 


this.started = false; 始 化 为 false。 
G) 
this.start = function() { 这 些 方法 与 以 前 相同 ， 但 将 
this.started = true; 它们 赋 给 对 象 的 属性 时 ， 使 
) De 用 的 语法 稍 有 不 同 ， 因 为 这 
this.stop = function() { 是 在 构造 函数 而 不 是 对 象 字 
this.started = false; 74 历 量 中 。 


}; 
this.drive = function() { 
if (this.started) { 
alert("Zoom zoom!"); 
} else { 
alert("You need to start the engine first."); 


上 


= 
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> 将 构造 函数 Car 和 Dog 复 制 到 一 个 文件 中 ， 再 添加 下 面 的 代码 。 然 后 运 
络 习 行 这 个 文件 ， 并 将 其 输出 记录 下 来 。 结 果 如 下 : 


Var limoParams = {make: "Webville Motors", 


model: "limo", 

year: 1983, 
Color: "black", 
passengers: 12, 
convertible: true, 
mileage: 21120}; 

Var limo = new Car(limoParams); 

var limoDog = new Dog("Rhapsody In Blue", "Poodle", 40); 


console.log(limo.make + " " + limo.model + " is a "+ typeof limo); 
console.log(limoDog.name + " Is a " + typeof limoDog); 


Java9cript 控 制 台 


Webville Motors limo is a object 


Rhapsody In Blue is a object 2— 我 们 得 到 的 输出 。 
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练习 答案 


我 们 需要 一 个 名 为 dogCatcher 的 函数 ， 它 在 传 入 的 对 象 是 小 狗 时 





经 习 返回 true， 否 则 返回 false。 请 编写 这 个 函数 ， 并 使 用 下 面 的 代码 
function dogCatcher(ob]j) { 更 简洁 的 版 本 这 function dogCatcher(obj) { 
if (obj instanceof Dog) { return (obj instanceof Dog); 
return true; } 
} else { 


return false:; 


function Cat(name, breed, weight) { 
this.name = name; 
this.breed = breed; 
this.weight = weight; 
} 
Var meow = new Catl("Meow", "Siamese", 10); 
Var whiskers = new Cat("Whiskers", “Mixed", 12); 
javaocript 控 制 台 


var fido = {name: "Fido", breed: "Mixed", weight: 38}; Fluffy is a dog! 


Spot is a dog! 


function Dog(name, breed, weight) { 
this.name = name; 
this.breed = breed; 
this.weight = weight; 
this.bark = function() { 
if (this.weight > 25) { 
alert(this.name + " says Woof'!"); 
} else { 
alert(this.name + " says Yip'"); 





}> 


var fluffy = new Dog("Fluffy", "Poodle", 30); 
var SPot = new Dogl("Spot", "Chihuahua", 10); 
var dogs = [meow, whiskers, fido, fluffy, spot]; 


for (var i = 0; i < dogs.length; i++) { 
If (dogCatcher(dogs[i]) { 
console.log(dogs[i].name + " is a dog!"); 


} 
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保险 杜 


Web 镇 汽车 制造 公司 根据 原型 车 来 制造 所 有 汽车 ， 彻 底 
变 了 汽车 制造 方式 。 原 型 车 提供 了 包括 发 动 、 驾 驶 和 停 
车 方式 在 内 的 基本 功能 以 及 制造 商 和 生产 年 份 这 两 个 属性 ， 
但 其 他 方面 都 需要 你 去 定制 。 希 望 车 身 是 红色 还 是 蓝 色 的 ? 
没 问 题 ， 上 自己 去 定制 好 了 。 想 装备 高 级 立体 声 系 统 ? 没 问 
题 ， 添 加 就 是 了 。 
现在 给 你 一 个 机 会 ， 设 计 一 辆 你 心目 中 完美 无 缺 的 汽车 。 
我 们 的 设计 如 下 。 





function CarProtoype!() { 
this.make = "Webville Motors": 
this.year = 2013; | 
this.start = function() {low bs 
this.stop = function() { 
this.drive = function() on 








var taxi = new CarPrototype(); 


ph 
taxi.model = "Delorean Remake"; 本 。 ， 本 | ss 
让 会 知道 了 ! 顺便 说 一 句 ， 


taxi.color = "silver"; 区 了 
taxi.currentTime = new Date(); < 一 在 这 里 定制 本 旱 到 这 主 叶 大 
taxi.fluxCapacitor = {type: "Mr. Fusion"}; 原型 车 。 

taxi.timeTravel = function(date) {...}; 
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练习 答案 


于 访 JavaScript 烧 鱼 游 戏 还 案 


加 
| 
习 四 目 
加 
上 山 mL rr > om 
a xo 
a mam 
| c| <| Z| >| ul zl wj 上 ju = Zn < 了 
四 


上 

zjolrl eeolrlole 
固 3 
aoaualrnuw 
图 也 
z > * 
名 加 
oswuz<rcor 

-i 
RET 
四 


三 


四 
加 
a 
z 
了 
四 
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] 9 使 用 原型 


超 路 的 邓 条 创建 万丈 





学 会 如 何 创 建 对 象 仅仅 是 个 开始 。 该 充实 一 个 些 关 于 对 象 的 内 
容 了 。 我 们 需要 在 对 象 之 间 建立 关系 和 共享 代码 的 方法 ， 需 要 扩展 和 改 
进 既 有 对 象 的 方法 。 换 名 话说， 我 们 需要 更 多 的 工具 。 在 本 章 中 你 将 看 
到 ，JavaScript 的 对 象 模型 非常 强大 ， 但 它 与 标准 面向 对 象 语言 的 对 象 
模型 稍 有 不 同 。JavaScript 采 用 的 不 是 基于 类 的 面向 对 象 系统 ， 而 是 更 
强大 的 原型 模型 ， 其 中 的 对 象 可 继承 和 扩展 其 他 对 象 的 行为 。 这 有 何 优 
点 呢 ? 你 马上 就 会 看 到 。 现 在 就 开始 吧 。 


探讨 对 象 和 继承 


564 


如 果 你 没有 学 习 过 经 典 继 承 ， 
人 如 真是 太 雪 运 了 ， 四 为 这 于 


对 不 起 ， 你 必须 将 Java 和 0++ 束 无 需 忘掉 任何 有 关 这 方面 的 
倍 脱 的 经 典 面 向 对 象 急 永 的 知 知识 了 | 
识 都 忘掉 。 





面向 对 象 编程 的 语言 ， 咱 
如 果 你 以 前 使 用 过 Java、C++ 或 其 他 任何 基于 传统 面向 对 象 编程 的 
们 有 必要 谈 一 谈 。 
人 :二 \ 来 慢 慢 听 我 讲 ， 说 不 定 下 1 JavaScript 版 本 可 
, 和 且 有 个 约会 ， 也 请 坐 下 来 
如 有 果 你 没有 使 用 过 ， 而 


这 在 未 来 可 能 发 生变 化 ， 





能 添加 类 。 因 此 ， 请 关注 
http://wickedlysmart.com/ 
到 扩 东 本 。 贡 型 ， 即 从 类 创建 对 象 的 模型 。 hfis， 以 获取 这 方面 的 最 
尔 直 说 吧 ，JavaScript 没 有 传统 的 面向 对 象 模型 ， 从 其 他 对 象 那 里 继 新 情况 ， 
人 JavaScript 根 本 就 没有 类 。 在 JavaScrip 中 ， 对 铺 基于 原型 的 继承 
所 六 AaVa “ , : Bb 诬 | 所 HYJO o 
en ) 我 们 称 之 为 原型 式 继承 (prototypal inheritance) 或 
承 行为 ， ho dl 





| 包 怨 ， 也 深 感 困惑 ， 
a 能 对 JavaScript 多 有 抱怨 ， 
交 受 过 面向 对 象 编程 训练 ， 可 能 0 它们 更 灵活 ， 
ee le tt de 
但 另 | a pe 


NN 、 ~ /已 、 A V 1 ] 曲 | 1 ] 将 ( ~ 
公 | TJ 9 A AN 从 4 人 9 有 2 


留 给 读者 去 完成 。 
、 、 } 、 > 松 心 情 ， 打开 心 
+ 象 编程 训练 ， 请 坐 下 来 ， 放 松 心情 ， 打 开 
你 接受 过 经 典 面向 对 象 - 可 对 象 编程 ” 毫 无 
ee 经 典 面向 对 象 
就 说 明 你 是 一 张 白 纸 ， 这 通常 是 天 大 的 好 事 。 
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使 用 原型 


先 来 介绍 一 种 更 好 的 对 象 周 


本 书 前 面 使 用 的 对 象 图 很 精巧 ， 但 本 草 要 严肃 地 讨论 对 象 ， 因 此 必须 
更 严肃 地 对 竺 对象 图 。 实 际 上 ， 我 们 非常 喜欢 原来 的 对 象 图 ， 而 本 章 
使 用 的 对 象 图 非常 复杂 ， 无 法 让 其 包罗 万 家。 


闲话 少 说 ， 上 新 的 对 象 图 。 


虽 对 象 同 改进 后 的 新 对 象 图 


_ 恨 性 这 是 构造 函数 
name: “Fido" 这 旦 六 J 
_ breed: “Mixed" 
name: “Fido” 

weight: 38 , breed: “Mixed” 

~ 人 人、 weight: 38 
Vog i a 
这 是 构造 函数 这 些 是 方法 





来 做 个 小 练习 ， 确 保 你 完全 明白 新 的 对 象 图 。 请 将 下 面 的 旧 对 象 
图 改 成 新 对 象 图 。 





brand: “Head Firsf” 
model: 2112 
InUse: true 
sharpen() 
clean() 


补 全 这 个 对 象 图 。 





PencilSharpener 
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深入 了 解 对 和 象 


再 谈 构 造 咏 数 : 它 能 让 我 们 重用 代码 ， 
但 效率 如 何 呢 


还 记得 前 一 草创 建 的 构造 国 数 Dog 吗 ? 虽 们 再 来 看 一 眼 ， 看 看 使 用 构造 国 数 有 何 好 处 : 








function Dog (name, breed, weight) { 
this.name = name; 


this .breed = breed: < 所 有 小 狗 对 象 都 包含 相同 的 属性 ， 但 这 些 
this.weight = weight; 属性 的 值 各 不 相同 。 
this.bark = function() { 
if (this.weight > 25) { < 一 每 个 小 狗 对 象 都 有 方法 bark。 
alert(this.name + " says Woof!"); 
} else { 
alert(this.name + " says Yip!"); 
于 改 更 重要 的 是 ， 在 所 有 小 网 对 家 之 
} 间 重 用 了 这 些 代码 。 


过 使 用 这 个 构造 国 数 ， 可 创建 一 ee 并 根据 喜好 进行 定制 ， 还 可 利用 
i NO 每 个 小 狗 对 象 都 从 构 
造 国 数 那 里 获得 了 相同 的 代码 ， ss 要 修改 代码 时 ， 这 可 如 免 很 多 麻烦 。 这 很 好 ， 
但 在 运行 阶段 执行 下 面 的 代码 时 ， 情 况 将 如 何 呢 ? 


var fido = new Dog("Fido", "Mixed", 38); 
Var fluffy = new Dog ("Fluffy", “Poodle", 30); 
Var spot = new Dog("Spot", "Chihuahua", 10); 


这 些 代码 创建 三 个 小 狗 对 象 。 使 用 新 对 象 图 表示 时 ， 这 些 对 象 类 似 于 下 面 这 样 。 


中 | 高举 得 太 早 ， 每 个 小 狗 











三 个 不 同 的 小 狗 对 象 , 也 对 象 都 有 目 己 的 方法 bark。 
三 六 厂 2 ES 
每 个 对 象 的 属性 值 各 Dog Dog Dog 这 些 方法 的 功能 完全 柏 
不 相同 7 name: "Fido" name: "Fluffy" name: "Spot" 同 ， 但 每 个 小 狗 对 象 都 有 
breed: "Mixed" breed: "Poodle" breed: "Chihuahua" 自己 的 副本 
weight: 38 weight: 30 weight: 10 9 Sh 
bark() 














每 个 对 象 都 有 一 个 指 


向 函数 bark 的 引用 。 
RN 





在 代码 层面 ， 我 们 实现 了 
旦 用 ， 但 在 运行 阶段 ， 每 
mction bark() { Function bark() { 个 小 \ 狗 对 象 好 像 都 获得 了 


er 让 小 狗 发 出 叫 声 的 代 // 让 小 狗 发 出 叫 声 的 代表 // 让 小 狗 发 出 叫 声 的 代 而 
: . | 数 bark 的 副本 。 
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我 已 到 断 了 小 狗 市 场 ， 儿 都 是 种 你 的 构 黎 
名 数 Dog 所 赐 。 咱 们 来 看 看 。 














你 创建 了 嘟 么 多 额外 的 方法 ， 我 
快 被 折磨 死 了 : 内 存 都 要 耗 光 了 ， 


到 了 时 肯定 玩 儿 完 ! 


要 是 移动 设备 ， 早 就 死 
起 起 了 。 








你 现在 的 位 置 ， 


使 用 原型 





567 


重用 行为 


568 






在 我 看 来 ， 每 个 小 狗 对 象 都 应 


说 说 而 已 。 





重复 的 方法 真是 个 问题 吗 


确实 征 个 问题 。 一 般 而 言 ， 我 们 不 希望 每 次 使 用 构造 国 数 实例 化 一 个 对 象 


时 ， 都 创建 一 组 新 的 方法 。 这 样 会 影响 应 用 程序 的 性 能 ， 占 用 计算 机 资源 。 


这 可 能 是 个 大 问题 ， 在 移动 设备 上 尤其 如 此 。 你 将 看 到 ， 还 有 更 灵活 、 更 
强大 的 JavaScript 对 象 创建 方式 。 


我 们 回 过 头 去 想 想 使 用 构造 函数 的 主要 目的 : 试图 重用 行为 。 例 如 ， 创 建 





大 量 的 小 狗 对 象 时 ， 我 们 希望 这 些 对 象 都 使 用 相同 的 park 方 法 。 通 过 使 用 < 一 


构造 冰 数 ， 我 们 只 需 将 bark 方 法 放 在 构造 函数 Dog 中 ， 这 样 每 次 实例 化 对 





象 时 ， 都 将 重用 方法 park 的 代码 ， 从 而 在 代码 层面 实现 重用 行为 的 目的 。 


但 在 运行 阶段 ， 这 种 解决 方案 的 效 末 并 不 好 ， 因 为 每 个 小 狗 对 象 部 将 获得 
自己 的 park 方 法 副本 。 


为 何 会 出 现 这 种 问题 呢 ? 这 是 因为 我 们 设 有 充分 利用 JavaScript 的 对 象 模 
型 。JavaScript 对 象 模型 基于 原型 的 概念 ， 在 这 种 模型 中 ， 可 通过 扩展 其 他 
对 象 〈 即 原型 对 象 ) 来 创建 对 象 。 


为 演示 原型 式 继承 ， 下 面 首先 来 创建 小 狗 原 型 。 
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该 有 自己 的 bark 方 法 。 我 只 是 





说 到 对 象 的 行为 时 ， 
我 们 通常 指 的 是 它 
支持 的 一 系列 方法 。 


使 用 原型 


原型 是 什么 

JavaScript 对 象 可 从 其 他 对 象 那里 继承 属性 和 行为 。 更 具体 地 

说 ，JavaScript 使 用 原型 式 继承 ， 其 中 其 行为 被 继承 的 对 象 称 藉 对 象 继承 另 一 个 对 象 后 ， 便 可 访问 其 
原型 。 这 和 旨 在 继承 既 有 属性 〈 包 括 方法 ) ， 同 时 在 新 对 象 中 添 所 有 方法 和 属性 。 


加 属性 。 这 说 得 过 于 抽象 ， 我 们 来 看 一 个 示例 。 
我 们 从 用 于 创建 小 狗 对 象 的 原型 开始 ， 它 可 能 类 似 于 下 面 这 样 。 










我 是 小 狗 原 型 包含 每 个 小 狗 对 
象 都 需要 的 属性 。 你 可 将 我 作为 
要 创建 的 任何 小 狗 的 原型 。 





这 是 小 狗 原 型 。 它 是 一 个 对 象 ， 包 含 一 >》 小 狗 原型 


所 有 小 狗 都 需要 的 属性 和 方法 。 二 
species: "Canine 





bark 
一 > 包含 我 们 所 创建 的 每 个 
这 个 原型 没有 包含 属 性 name、breed a 小 狗 都 将 用 到 的 行为 ， 





和 weight， 因 为 这 些 属性 随 小 狗 而 异 ， 
将 由 继承 该 原型 的 小 狗 对 象 提 供 。 


有 了 不 错 的 小 狗 原 型 后 ， 便 可 创建 从 该 原型 继承 属性 的 小 狗 
对 象 了 了 。 对 于 这 些小 狗 对 象 ， 还 可 根据 其 有 具体 需求 闫 加 属 
性 和 行为 。 例 如 ， 对 于 每 个 小 狗 对 家 ， 我 们 都 将 添加 属性 
name、breed 和 weidght。 


这 些小 狗 对 象 需要 发 出 叫 声 、 奔 跑 或 摇 尾 巴 时 ， 都 可 使 用 原 
型 捉 供 的 这 些 行为 ， 因 为 它们 从 原型 那里 继承 了 这 些 行为 。 
为 了 让 你 明白 其 中 的 工作 原理 ， 下 面 来 创建 儿 个 小 狗 对 象 。 




















你 现在 的 位 置 ， 


包含 对 每 个 小 狗 来 说 
所 一 都 很 有 用 的 属性 。 
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小 狗 的 继承 


继 头 原型 


首先 ， 需要 创建 小 狗 对 象 Fido、Fluffy 和 Spot 的 对 象 图 ， 让 它们 继承 新 创建 的 小 狗 原 型 。 为 
表示 继承 关系 ， 我 们 将 绘制 从 小 狗 实例 到 原型 的 虚线 。 别 专 了， 我 们 只 将 所 有 小 狗 都 需要 的 
方法 和 属性 放 在 小 狗 原 型 中 ， 因 为 所 有 小 狗 都 将 继承 它们 。 对 于 所 有 随 小 狗 对 象 而 异 的 属性 ， 
如 name， 我 们 都 将 其 都 放 在 小 狗 实例 中 ， 因 为 每 条 小 狗 的 这 些 属性 都 各 不 相同 。 





一 所 有 小 狗 都 需要 的 属性 














和 方法 。 
这 里 有 三 个 继承 小 狗 原 一 一 Bed A Y、 
型 的 小 狗 对 象 。 原 型 包 人 1 、、 
含 所 有 小 狗 都 需要 的 属 , ' 
性 (包括 方法 ) ， 小 狗 2 ” 
对 象 本 身 包含 其 独特 的 Fa 、 
属性 : name、breed 和 1 1 \ 
| ht。 | 四 
;Fluffy 亦 如 此 。 \ 
' \ 我 们 创建 的 每 
| \ 个 小 狗 对 象 都 
1 \ yo 此 O 
产 有 
Dog Dog 
name: “Fido” name: “Fluffy” name: “Spot” 
breed: “Mixed” breed: “Poodle” breed: “Chihuahua” 
weight: 38 weight: 30 weight: 10 


小 狗 对 象 Fido 只 需 包 
含 属性 name、breed 和 
weidht。 
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使 用 原型 


继 水 的 工作 原理 

既然 方法 park 并 不 包含 在 各 个 小 狗 对 象 中 ， 而 是 包含 在 原型 中 ， 如 何 让 小 
多 发 出 叫 声 呢 ?》 这 正 是 继承 的 用 武之 地 。 对 对 象 调用 方法 时 ， 如 果 在 对 象 
中 找 不 到 ， 将 在 原型 中 查找 它 ， 如 下 所 示 。 





最 后 ， 找 到 方法 bark 后 ， 
我 们 调用 它 ， 导 致 小 狗 对 










象 fiqo 发 出 叫 声 。 
始 ， 控 编号 
ee 4、5 的 顺 小 狗 原 型 
人 > species: "Canine" 在 小 狗 原 型 中 查找 ， 发 现 其 






中 确实 有 方法 bark。 





\ 





1 














条 
@ 首先, 需要 编写 一 些 代码 .例如 ， 像 下 
面 这 样 对 一 个 小 狗 对 象 调用 方法 park ' 
的 代码 : 6 po 
fido.bark (); es ee cs 
C breed:“Mixed” bark; 我 们 就 沿 继 承 链 上 移 ， 
weight: 38 . ys 
对 对 象 fido 调 用 方法 bark 在 其 原型 中 楼 者 碍 找 。 
的 简单 代码 。 








© 为 执行 这 些 代码 ， ep 本 
这 里 设 有 方法 barkl 


fido 中 查找 方法 bark， 但 没 


ea 
有 找到 。 因此 襄 继 承 链 条 上 移 ， 


在 原型 中 查找 。 


属性 的 情况 也 一 样 。 如 末 我 们 编写 了 需要 获取 fido.name 有 鸭 代 码 ， 
将 从 fidqo 对 象 中 获取 这 个 值 。 如 采 要 获取 fidqo.species 的 值 ， 将 
首先 在 对 象 fido 中 查找 ; 在 这 里 找 不 到 后 ， 将 接着 在 小 狗 原 型 中 查 
找 (结果 是 找到 了 ) 。 





你 现在 的 位 置 ， 571 


为 继承 使 用 原型 











建 艺 这 种 新 奇 的 继 尖 关系 后 ， 我 的 小 狗 生 产 工厂 
是 不 是 可 以 重新 开张 了 ? 





他 开动 工厂 ， 大 量 地 生产 
































中 他 创建 的 一 系 现在 只 有 一 个 bark 函 
实例 ， 它 们 都 继承 了 小 人 。 教 ， 比 以 前 好 得 多 。 
列 实例 ， 它 们 都 
狗 原 型 oO 01 
小 狗 原型 
species: "Canine" 
2 
2 /7 “、 ~ ~ ~~ es 
pa AN ~ ~ ™ 必 
be 人 人 ~ me 
” > NS ™ 
a 人 ~ ~ ey >/ = 
pe S 心 ms/ ew Wm 
DR 》 AN a a ss 
厂 是 二 三 
Dog Dog Dog Dog Dog Dog 
name: “Fido” name: “Barnaby” name: “Smokey” name: “Woofy” name: “Max” name: “LadyBug” 
breed: “Mixed” breed: “Basset Hound” breed: “Chow Chow” breed: “Mixed” breed: “Hotdog” breed: “Hound” 
weight: 38 weight: 55 weight: 40 weight: 20 weight: 38 weight: 55 





























\ 每 个 小 狗 都 有 其 独特 的 name、breed 和 weiqht， 
但 都 依赖 于 原型 提供 的 属性 species 和 方法 bark。 





明白 如 何 使 用 继承 后 ， 便 可 以 创建 大 量 的 小 狗 了 。 这 些 
小 狗 都 能 发 出 叫 声 ， 但 依赖 于 小 狗 原型 提供 的 方法 park。 
我 们 实现 了 代码 重用 : 不 仅 只 需 在 一 个 地 方 编写 代码 ， 而 
且 让 所 有 小 狗 实例 都 在 运行 阶段 使 用 同一 个 bark 方 法 ， 从 ooWB .4 
而 避免 了 庞大 的 运行 阶段 开销 。 人 


你 将 看 到 ， 通 过 使 用 原型 ， 可 快速 地 创建 对 象 ， 这 些 对 象 
不 仅 能 够 重用 代码 ， 还 能 新 增 行为 和 属性 。 


谢谢 你 5! 你 没有 使 膨 继 水 
了 时， 我 们 和 兰 点 昧 死 了 ! 
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鲁 与 原型 


继承 原型 并 不 意味 着 必须 与 它 完 全 相同 。 在 任何 情况 
下 ， 都 可 重 写 原型 的 属性 和 方法 ， 为 此 只 需 在 对 象 实 例 
中 提供 它们 即 可 。 这 之 所 以 可 行 ， 是 因为 JavaScript 总 
是 先 在 对 象 实例 ( 即 具体 的 小 狗 对 象 ) 中 查找 属性 ， 如 
有 果 找 不 到 ， 再 在 原型 中 查找 。 因 此 ， 要 为 对 象 spot 定 
制 方法 park， 只 需 在 其 中 包含 自 定 义 的 方法 park。 这 
样 ，JavaScript 查 找 方法 bark 以 便 调 用 它 时 ， 将 在 对 象 
spot 中 找到 它 ， 而 不 用 劳 神 去 原型 中 查找 。 


下 面 来 看 看 如 何在 对 象 spot 中 重 写 方法 park， 让 它 发 
出 叫 声 时 显示 says WOOF!。 








小 狗 原 型 保持 不 


bark() 
run() 
wag!) 








小 狗 原 型 


species: "Canine" 














对 我 来 说 ， 在 发 出 od 声 时 显 
示 SAys Yip! 不 大 合适 。 我 需要 
发 出 更 大 的 od 声 ， 显 示 Says 
W00F! 如 何 ? ! 








使 用 原型 





a | 
Spot ) 


上 ”Spot 不 使 用 原型 中 的 方法 


bark 
使 用 它 

















本 
| 
| 
| 
。 目 二 义 方 流 bark D 
| 
但 对 象 spot 包 含 显示 5ay5 仅 供 Spot 使 用 。 
WOOFI 的 目 定义 方法 park。 i f Dog 
, name: “Spot” 
\_ 六 breed: “Chihuahua” 
a weight: 10 
A424 
dg 





完成 这 些 准 备 工作 后 ， 便 
可 调用 方法 bark 了 。 


(> spPot.bark () ; 








在 对 象 spot 中 找到 了 方法 bark， 
无 需 再 在 原型 中 查找 。 这 个 方 
法 显示 says WOOF!。 


将 首先 在 对 象 spot 中 查找 方法 bark。 


你 现在 的 位 置 ， 


9 OF; 
但 Fidao 和 Fluffy 依 然 
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原型 的 练习 


代 效 冰 东 贴 

冰箱 上 有 一 个 对 象 图 ， 但 有 人 将 它 打 乱 了 ， 你 能 帮忙 将 它 组 装 起 来 吗 ? 在 这 个 对 象 
图 中 ， 有 两 个 机 器 人 原型 的 实例 : 其 中 一 个 1956 年 生产 的 Robby， 它 归 Dr. Morbius 
所 有 ， 拥 有 一 个 开关 ， 喝 咖啡 时 去 星巴克 ; 另 一 个 是 1962 年 生产 的 Rosie， 它 归 
George Jetson 所 有 ， 能 够 打扫 房间 。 需 要 指出 的 是 ， 有 些 冰箱 贴 可 能 是 多 余 的 ， 祝 
你 好 运 ! 








族 


> 机 器 人 原型 
可 供 机 器 人 继承 人 | 中 maker: "ObjectsRUs" 请 在 这 里 组 装 对 象 图 。 
多 型 O 全 | 
I speak() v 
y makeCoffee() 
blinkLights() 








eanHousel | 
makeCofieel) 


onOffSwiteh: true true 
makeCoffee() 


Robot Robot 


name: "Robby" name: "Rosie" 























owner: George Jetson year: year: 1962 


原型 从 哪里 来 


前 面 花 了 很 多 篇 幅 讨论 小 狗 原 型 ， 你 现在 可 能 想 看 的 是 代码 
示例 ， 而 不 是 对 象 图 示例 。 那 么 ， 如 何 创建 或 获取 小 狗 原 型 
呢 ? 实 际 上 ， 你 已 经 有 了 一 个 这 样 的 原型 ， 只 是 你 没有 意识 
到 而 已 。 


下 面 演 示 了 如 何在 代码 中 访问 这 个 原型 : 


修理 SE 血 发 现 它 有 一 个 
Doda .prototvpe 如 果 你 查看 构造 芳 数 Dog， 将 发 
il prototype 属 性 。 这 是 一 个 指向 原型 的 引用 。 


属性 prototype? 







等 等 ，Dog 是 个 构造 号 数 ， 即 鸟 数 。 你 
是 说 它 有 属性 咀 ? 


幕后 的 东西 还 是 不 要 知道 的 好 | 


跟 你 开玩笑 呢 ， 你 说 得 没 错 ， 但 我 们 一 直 故 意 隐瞒 了 这 
一 点 。 简 单 地 说 ， 在 JavaScript 中 ， 畏 数 也 是 对 象 。 实 际 
上 ， 在 JavaScript 中 ， 几 乎 所 有 的 东西 都 是 对 象 ， 数 组 也 


是 一 一 你 可 能 还 没有 意识 到 这 一 上 后。 


但 就 目前 而 言 ， 我 们 不 想 节 外 生 枝 。 你 只 需 知 道 ， 除 了 
具备 你 知道 的 各 种 功能 外 ， 函 数 还 可 以 有 属性 ， 而 构造 
国 数 都 包含 属性 prototype。 这 里 回 你 保证 ， 本 书后 面 
将 更 深入 地 讨论 函数 以 及 其 他 对 人 象 。 














你 现在 的 位 置 ， 


使 用 原型 
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自 定义 原型 


如 何 设 置 原型 


前 面 说 过 ， 可 通过 构造 图 数 Dog 的 属性 prototype 来 访问 原型 对 象 ， 但 
这 个 原型 对 象 包含 哪些 属性 和 方法 呢 ? 默认 包含 的 不 多 。 换 名 话说 ， 你 
需要 给 原型 添加 属性 和 方法 ， 这 通常 是 在 使 用 构造 函数 前 进行 的 。 


下 面 来 设置 小 狗 原 型 。 为 此 ， 得 有 一 个 可 供 使 用 的 构造 畏 数 。 下 面 来 看 
看 如 何 根 据 对 象 图 创建 这 样 的 构造 函数 : 





function Dog (name, breed, weight) { 这 是 用 于 创建 小 狗 实 例 的 








this.name = name; 构造 函数 。 SI Dog 
this.breed = breed; 目 己 的 属性 name、breed name: Spot 
this .weight = weight; 一 一 一 和 和 weight， 因 此 需要 在 构 > | breed: “Chihuahua” 
} 造 函 数 中 添加 这 些 属性 。 7 | weight: 10 
方法 来 目 原型 ， 因 此 不 需要 在 构造 函数 中 ee 
定义 它们 。 


创建 构造 函数 后 ， 便 可 以 设置 小 狗 原型 了 。 我 们 希望 它 包 含 属性 species 
以 及 方法 park、run 和 wag， 如 下 所 示 : 


Dog .prototype.species = "Canine"; 人 将 字符 串 “Canine” 赋 给 原型 的 属性 


species。 
Dog .prototype.bark = function() { 


Sl 《一 为 定义 各 个 方法 ， 我 们 分 别 将 合适 的 函 孝 
console.log(this.name + " says Woof!"); 


赋 给 原型 的 属性 bark、run 和 wag。 
} else { A/ 


console.log(this.name + " says Yip!"); 


} 
Am 
编码 技巧 
别 忘 了 串 接 表 示 法 : 
1 


Dog .prototype. species 








Dog .prototype.run = function() { 
console.log ("Run!"),; 






Dog .prototype.wag = function() { 
console.log ("Wag!"); 通过 构造 函数 Dog 获 取 其 属性 prototype， 后 者 

包 

征 


一 个 引用 ， 指 向 的 对 象 包含 属性 species。 


使 用 原型 





创建 几 个 小 狗 对 象 并 对 原型 进行 测试 二 
为 测试 这 个 原型 ， 请 在 一 个 文件 (dog.html) 中 输入 下 面 的 代码 ， 
再 在 训 览 三 中 加 载 它 。 这 里 再 次 列 出 了 前 一 页 的 代码 ， 并 添加 了 一 
些 测 试 代 码 。 请 确保 所 有 的 小 狗 对 象 都 像 预 期 的 那样 发 出 叫 声 、 奔 


跑 和 揪 尾 。 
function Dog(name, breed, weight) { 这 是 构 造 防 数 Dog。 
this.name = name; < 


this.breed = breed.; 
this.weight = weight; 


| /一 这 里 给 小 狗 原型 添加 了 属性 和 方法 。 


Dog .prototype.species = "Canine"; 


Dog .prototype.bark = function() { 


if (this.weight > 25) { 人 
Ne 中 、 一 个 0 
console.log(this.name + " says Woof!"); <€ 我 们 给 小 狗 原 型 添加 了 一 个 属性 丰 
else 三 个 方法 。 
} { pS 
console.log(this.name + " Says Yip!"); 
} 区 


Dog .prototype.run = function() { 
console.log("Run!"),; 


Dog .prototype.wag = function() { 


console.log ("Wag!"); 像 通 常 那样 创建 小 狗 
bs 对 象 。 
Var fido = new Dog("Fido", "Mixed", 38); Ee 


Var fluffy = new Dog ("Fluffy", “Poodle", 30); 


var spot = new Dog("Spot", "Chihuahua", 10); 等 等 不 是 说 Spot 发 出 叫 声 时 应 
， 声 时 应 


© J 
江 丰 Sa 1009 
fido.bark(); 轩 ys WOOF!03 7 


idm) JavaScript 控 制 台 

fido .wag() ; 多 __ pid 、 
然后 ， 像 通常 那样 对 ldo says Woof! 

fluffy .bark (); 每 个 小 狗 对 象 调用 方 人 

fluffy.run() ; ”法 。 每 个 小 狗 对 象 都 WT 

fluffy .wag (); 从 原型 那里 继承 了 这 Fluffy says Woof! 


[一 竺 方法 。 Run! 
spot.bark () ; 


Wagl 
spot.run(); 每 个 小 狗 对 家 讽 有 
SPot.wag() ; 都 能 发 出 叫 忆 、 pot says Yip! 


奔跑 和 担 尾 。 Run! 


很 好 | 、_》 9 
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重 与 原型 












别 把 我 给 忘 7 ， 我 要 
求 在 发 出 od 声 了 时 显示 SAays 
W00FI 咱 ! 






4 二 a D 


编写 让 Sp0t 发 出 od 声 时 显示 
says WO00FI 的 代码 


| 别 担心 ， 我 们 可 没 忘记 Spot。Spot 要 求 在 发 出 叫 声 
时 显示 says WOOF!， 因 此 我 们 需要 重 写 原型 ,给 
Spot 提 供 自 定 义 方法 bark。 下 面 来 修改 代码 : 


这 里 省 略 了 其 他 的 代码 ， 这 每 在 节省 纸张 或 者 


ea 说 减少 碳 足 迹 ……. 


var spot = new Dog("Spot", "Chihuahua", 10); 










我 们 所 作 的 唯一 修改 
是 ， 给 Spot 提供 目 定 
义 方法 bark。 








// 对 fido 和 fluffy 调 用 方法 的 代码 


spPot.bark () ; 人 一 对 5pot 调 用 方法 bark 的 代码 根本 
spot.run(); 不 需要 修改 。 


spot .wag (); 


出 试 自 定义 方法 bark 


添加 上 述 代码 后 ， 进 行 简 单 的 测 JavaScript 控 制 台 

试 :……: Fido says Woof! 
Run! 
k=Te 


Fluffy says Woof! 


Spot 得 偿 所 愿 ， 在 发 出 of Run ! 
声 时 显示 了 says WOOFI Wag'! 


\ >> Spot says WOOF! 


Run! 
Wag! 
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使 用 原型 


还 记得 前 面包 含 机 器 人 Robby 和 Rosie 的 对 象 图 吗 ? 现在 就 来 实现 它 。 我 们 编写 了 构 
~ 造 函 数 Robot 和 一 些 测试 代码 ， 而 你 需要 做 的 是 设置 机 器 人 原型 并 创建 这 两 个 机 器 
: 儿 习 人 对 象 ， 再 通过 运行 对 这 些 代码 进行 测试 。 





pe 这 是 构造 函数 Robot， 你 还 
需 设 置 其 原型 。 


function Robot(name, year, owner) { 
this.name = name; 
this.year = year; 请 在 这 里 设置 机 器 人 原型 。 
this .owner = owner; L 一 


} 
Robot .PrototyPe .makeLr = 


Robot .PototyPe .SPeak 


Robot .PrototyPe .makeCoffee = 


Robot .prototype .bLInkLIghts = 


var robby 


Var rosie 


请 在 这 里 编写 创建 机 器 人 对 象 Robby 
和 Rosie 的 代码 。 请 务必 给 这 些 实例 
从 添加 所 有 的 百 定义 属性 ， 


robby .onOffSwitch = 
robby .makeCoffee 


rosie.cleanHouse 


使 用 这 段 代 码 测试 这 些 实例 ， 
确保 它们 继承 了 原型 并 能 


确 地 工作 。 
console.log(robby.name + " was made by " + robby.maker + » 
" in " + robby.year + " and is owned by " + robby .owner); 
robby .makeCoffee(); 
robby .blinkLights (); 


console.log(rosie.name + " was made by " + rosie.maker + 
" in " + rosie.year + " and is owned by " + rosie.owner); 


rosie.cleanHouse (); 











思考 原型 





我 有 点 斤 惑 ， 鉴 于 方法 bark 位 于 原型 而 不 是 对 象 
也 ， 其 中 的 this.name 怎 么 不 会 导致 问题 呢 ? 





问 得 好 。 在 没有 使 用 原型 的 情况 下 ， 这 
很 容易 解释 ， 因 为 this 指 的 是 方法 被 调 
用 的 对 象 。 调 用 原型 中 的 方法 b ark 时 ， 
你 可 能 认为 this 指 的 是 原型 对 象 ， 但 情 
况 并 非 如 此 。 


调用 对 象 的 方法 时 ，this 被 设置 为 方 
法 被 调用 的 对 象 。 即 便 在 该 对 象 中 没有 
找到 调用 的 方法 ， 而 是 在 原型 中 找到 了 
它 ， 也 不 会 修改 this 的 值 。 在 任何 情况 
下 ，this 都 指 问 原始 对 象 ， 即 方法 被 调 
用 的 对 象 ， 即 便 该 方法 位 于 原型 中 亦 如 
此 。 因 此 ， 即 便 方法 bark 位 于 原型 中 ， 
调用 这 个 方法 时 ，this 也 将 被 设置 为 原 
人 小 狗 对 象 ， 得 到 的 结果 也 是 我 们 期 望 
有 的， 如 显示 Fluffy says Woof!。 
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使 用 原型 
所 有 的 


让 - 王 汉 小 狗 都 学 会 新 技能 
该 让 所 有 小 狗 都 学 会 新 技能 了 。 没 错 ， 就 是 所 有 的 小 狗 。 使 用 原型 后 ， 如 果 给 原 


型 添加 一 个 方法 ， 所 有 的 小 狗 对 象 痢 将 立即 从 原型 那里 继承 这 个 方法 并 自动 获得 
这 种 新 行为 ， 包 括 添加 方法 前 已 创建 的 小 狗 对 象 。 


假设 我 们 要 让 所 有 小 狗 都 会 坐 下 ， 只 需 在 原型 中 添加 一 个 坐 下 的 方法 即 可 。 





创建 另 一 个 小 狗 对 象 ， 


var barnaby = new Dog ("Barnaby" ，"Basset Hound", 55); 以 测试 议 一 点 。 
Dog .prototype.sit = function() { 
了 TY 站 -| | IA) 和 且 冰 加 方 法 sit。 
console.log(this.name + is now sitting"),; 
} 


下 面 来 让 小 狗 Barnaby 坐 下 : 


首先 检查 对 象 barnaby 是 否 有 方法 ee 

barnaby .sit() ; < 一 一 c 公 伟 对 家 barnaby 走 己 、 B ee 、 

sit， 结 果 发 现 它 没有 。 接 着 在 原型 9 
中 查找 ， 找 到 方法 sit 后 调用 它 。 


> 





pe 2 7 
深入 研究 
下 面 来 更 深入 地 研究 其 中 的 工作 原理 。 请 务必 按 步 骤 1、2、3、4 的 顺序 进行 





oO 


@ 在 原型 中 找到 了 方法 sit， 并 且 
调用 它 。 


y 





小 狗 原型 


species: "Canine" 


bark() 







接 下 来 ， 在 原型 中 添加 新 方 
法 8it。 








// 让 小 独 坐 下 的 人 


调用 方法 barnaby.sit， 但 在 
对 象 barnaby 中 没有 找到 方法 
Sle Dog 
name: “Barnaby” 


” 3 breed: “Basset Hound” _ 
2 weight: 55 和 创建 一 个 新 的 小 狗 对 象 bparnabv。 














你 现在 的 位 置 ， 581 


关于 原型 的 问题 


原型 是 动态 的 


Barnaby 能 够 坐 下 了 ， 看 到 这 一 





能 使 用 这 个 方法 。 





小 狗 原 型 


species: "Canine" 


bark() 
run() 




















Dog 
name: “Barnaby” 


breed: “Basset Hound 
weight: 55 











点 我 们 很 高 兴 。 实 际 上 ， 现 在 所 有 的 小 
狗 都 能 够 坐 下 ， 因 为 在 原型 中 添加 方法 后 ， 继 承 该 原型 的 任何 对 象 都 说 ， 


当然 ， 对 属性 来 
情况 亦 如 Lt 。 







任何 继承 小 狗 原 型 的 
小 狗 对 象 都 可 使 用 方 








Dog Dog 








Dog 





Dog 










name: “Fido” 
breed: “Mixed” 
weight: 38 


name: “Smokey” 
breed: “Chow Chow” 


weight: 40 weight: 20 








name: “Woofy” 
breed: “Mixed” 


法 sit。 
name: “LadyBug” 


breed: “Hound” 
weight: 55 










name: “Max” 
breed: “Hotdog” 
weight: 38 





















人 
上 9) ; 也 就 是 说 ， 给 原型 添加 新 的 方法 或 属性 后 
原型 的 所 有 对 象 实例 都 将 立即 看 到 它 ? 


继承 该 


A 和 

喉 ， 和 如果 你 说 的 “看 到 ”是 继承 的 意思 ， 那 你 说 的 完全 
正确 。 请 注意 ， 这 提供 了 一 个 途径 ， 让 你 只 需 在 运行 阶段 
修改 原型 ， 就 可 扩展 或 修改 其 所 有 实例 的 行为 。 
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y 

人) ;我 知道 ， 给 原型 添加 新 属性 后 ， 继 未 该 原型 的 所 有 
对 象 都 将 包含 这 个 属性 ， 但 修改 原型 的 既 有 属性 呢 ? 这 是 
否 也 会 影响 继承 原型 的 所 有 对 象 ” 比方 说 ， 如 果 我 将 属性 
species 的 值 从 Canine 改 为 Feline， 会 不 会 导致 所 有 有 既 
有 小 狗 对 象 的 属性 species 都 变 成 Feline? 


A 
只 。 是 的 。 修改 原型 的 任何 属性 时 ， 都 将 影响 继承 该 原 
型 的 所 有 对 象 只 要 它们 没有 重 写 这 个 属性 





function Game() { 
this.level = 0;， 


Game .prototype.play = function() { 
// 让 玩家 玩 游戏 的 代码 


this.levelt+: 


console.log("Welcome to level " + this.level); 


this .unlock (); 


Game .prototype.unlock = function() { 


function Robot (name, year, owner) { 
this.name = name; 
this.year = year; 
this.owner = owner; 


Var game = new Game (); 
var robby new Robot("Robby", 1956, 
Var rosie = new Robot("Rosie", 1962, 


while (game.level < 42) { 
game .play () ; 


robby .deployLaser () : 
rosie.deployLaser () ; 


使 用 原型 


有 一 个 机 器 人 游戏 使 用 了 机 器 人 Robby 和 Rosie。 这 个 机 器 人 游戏 的 代码 如 下 。 在 这 个 
游戏 中 ， 玩 家 的 等 级 达到 42 后 ， 机 器 人 将 具备 一 项 新 功能 ， 发射 激 光束 。 请 补 全 下 面 
: 续 习 的 代码 ， 使 得 在 玩家 的 等 级 达到 42 后 ， 机 器 人 Robby 和 Rosie 都 能 发 射 激光 束 。 继 续 往 
下 阅读 前 ， 请 查看 本 章 末 尾 的 答案 。 


JavaScript 控 制 台 

WeLcome to level 1 
Welcome to level 2 
WeLcome to level 3 


Welcome to level 41 
Welcome to level 42 


Rosie is blasting you with 
laser beams. 





( 记 这 是 我 们 得 到 的 输出 示 
例 。 补 全 代码 后 ， 请 将 
试 玩 玩 这 个 游戏 ， 看 看 
是 哪个 机 器 人 先 发 射 


激光 束 。 


"Dr. Morbius"); 
"George Jetson"); 
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对 初始 值 使 用 原型 


方法 sit 更 有 趣 的 实现 


下 面 来 让 方法 sit 更 有 趣 些 : 小 狗 开始 处 于 非 坐 着 ( 即 站 立 ) 状态 。 在 方法 sit 中 ， 
判断 小 狗 是否 是 坐 着 的 。 如 末 不 是 ， 就 让 它 坐 着 ， 如 末 是 ， 就 告诉 用 户 小 狗 已 经 是 
坐 着 的 。 为 此 ， 需 要 一 个 额外 的 属性 sitting， 用 于 跟踪 小 狗 是 否 是 坐 着 的 。 下 面 
来 编写 这 样 的 代码 : 











首先 ， 在 原型 中 添加 属性 sitting。 通过 在 原型 中 将 属性 sitting 


汉 轨 为 false， 让 所 有 的 小 狗 
Pa 接 下 来 ， 在 方法 sit 中 检查 小 狗 是 
Dog.prototype.sitting = false; te 否 是 坐 着 的 。 如 果 这 个 方法 是 首 


ee 次 被 调用 ， 检 查 this.sitting 时 ， 将 
Dog.Prototype.sit = function() { 在 小 狗 原 型 中 查找 其 值 。 


if (this.sitting) { 


console.log(this.name + " is already sitting"); 


} else { 人 一 如 果 小 狗 是 坐 着 杖 ， 就 指出 小 狗 已 
this.sitting = true; 经 是 坐 着 的 。 
console.log(this.name + " is now sitting"); 

} 入 、 

}; 但 如 果 小 狗 不 是 坐 着 的 ， 就 说 它 现在 坐 下 ， 肯 


将 this.sitting 设 置 为 true。 这 将 重 写 原 型 的 属性 
请 注意 ， 实例 现在 有 忻 己 的 sitting 属 性 , 一 sitting， 并 在 实例 中 设置 这 个 属性 的 值 。 
其 值 为 true。 


这 些 代 码 的 有 趣 之 处 在 于 ， 小 狗 实例 刚 创 建 时 ， 从 原型 那里 继承 了 属性 sitting， 
该 属性 的 值 默 认为 false; 但 调用 方法 sit 后 ， 束 给 小 狗 实 例 添加 了 属性 sitting 的 
值 ， 导 致 在 小 狗 实例 中 创建 了 属性 sitting。 这 让 我 们 能 够 给 所 有 小 狗 对 象 指定 默 
认 值 ， 并 在 需要 时 对 各 个 小 狗 进行 定制 。 








出 试 新 的 sit 方 法 
下 面 来 尝试 使 用 这 个 方法 。 请 在 你 的 代码 中 添加 上 述 新 属性 sitting 以 及 方法 
sit 的 新 实现 ， 再 对 代码 进行 测试 。 你 将 发 现 ， 现 在 可 以 让 parnapy 坐 下 ， 再 让 
spot 华 下 ， 且 每 个 小 狗 对 象 都 独立 地 跟踪 自己 是 否 是 坐 着 的 。 





JavaScript 控 制 台 
barnaby.sit()—— ~ BEE sitting 
barnaby .sit() 一 >》 RETe bY SItting 
spot. sit() i Spot is now sitting 
spot.sit() — > Spot is already sitting 
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再 谈 属 性 sitting 的 工作 原理 


下 面 来 确保 你 明白 了 其 中 的 工作 原理 ， 因 为 如 果 你 没有 仔细 分 析 前 述 实现 ， 可 能 遗漏 重要 的 
细 方 。 要 点 如 下 : 首次 获取 sitting 的 值 时 ， 是 从 原型 中 获取 的 ; 但 接 下 来 将 sitting 设 置 
为 true 时 ， 是 在 对 象 实例 而 不 是 原型 中 进行 的 。 在 对 象 实例 中 添加 这 个 属性 后 ， 接 下 来 每 次 
获取 sitting 的 值 时 ， 都 将 从 对 象 实例 中 获取 ， 因 为 它 重 写 了 原型 中 的 这 个 属性 。 下 面 再 次 


详细 地 介绍 这 一 所 


WYoO 


[2) 因此 在 原型 中 查找 ， 
并 发 现 sitting 的 ” 
从 为 falgse 








© 我 们 将 thnis.sitting 设 
置 为 true。 这 将 在 spot 中 


添加 新 属性 sitting， 并 
将 其 值 设 置 为 true。 



























‘function sit() { 
// 让 / 痢 坐 下 的 代码 













} 





Dog 
name: “Spot” 
breed: “Chihuahua” @ 首次 调用 spot.sit。 此 时 ， 
weight: 10 g . . 
9 SN spot 没 有 属性 sitting。 
bark() 











小 狗 原 型 


Species: "Canine" 
sitting: false 











bark() 
run() 


wag!() 
sit() 










// 让 小 狗 玲 下 的 人 到 








Dog 
name: “Spot” 
breed: “Chihuahua” 


Si ht: 10 


bark() 


大 人 一 一 


@@ 第 二 次 调用 spot .sit. 此 
时 spot 包 含 属性 sitting,， 
人 一 其 值 为 上 zue。 





你 现在 的 位 置 


使 用 原型 


小 狗 原 型 请 务必 按 步 又 1、2、3、4 
species: "Canine" 的 顺序 进行 ， 从 这 里 开始 。 
sitting: false 
bark() 
run() 
wag() 
sit() 
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使 用 hasOwnProperty 







既然 说 到 属性 ， 在 代码 中 是 否 有 办 
法 判断 使 用 的 属性 包含 在 实例 还 是 
原型 中 呢 ? 






有 办 法 ， 可 使 用 每 个 对 象 都 有 的 方法 nasOwnProperty。 如 琳 属 
性 是 在 对 象 实例 中 定义 的 ， 这 个 方法 将 返回 trzue。 如 采 属 性 不 是 
在 对 象 实例 中 定义 的 ， 但 能 够 访问 它 ， 就 可 认为 它 肯 定 古 在 原型 
中 定义 的 。 


下 面 来 对 fido 和 spot 调 用 这 个 方法 。 首 先 ， 我 们 知道 ， 在 小 狗 
原型 中 定义 了 属性 species, 而 且 spot 和 fiaqo 都 没有 重 写 这 个 属 
性 。 因 此 ， 如 末 我 们 对 这 两 个 对 象 调 用 方法 nasOwnProperty,， 
并 以 字符 串 的 方式 传 入 属性 名 "species"， 结 果 都 将 为 false: 
这 两 条 语句 都 返回 false， 因 为 


spot.hasOwnProperty (" SPecilies") : 有 species 是 在 原 型 而 不 是 对 象 实 
例 spot 和 fiqdo 中 定义 的 。 











fido.hasOwnProperty ("species"); 





下 面 来 尝试 对 属性 sitting 进 行 这 种 判断 。 我 们 知道 ， 在 原型 
中 定义 了 属性 sitting， 并 将 其 初始 化 为 false， 因 此 将 spot. 
sitting 设 置 为 true 时 ， 将 重 写 原型 中 的 属性 sitting， 并 在 实 
例 spot 中 定义 属性 sitting。 下 面 来 询问 spot 和 fido 自 己 是 盏 
定义 了 属性 sitting: 

首次 检查 spot 是 否 有 目 己 的 sitting 属 性 

时 ， 结 果 为 false。 


接 下 来 ， 我 们 将 spot.sitting 设 


spot.hasOwnProperty ("sitting"); 置 为 true， 这 将 在 实例 spot 中 
spot.sitting = true; 诺 加 属性 sitting。 


spot.hasOwnProperty (" sitting" ) ; S 这 次 调用 hasOwnProperty 时 ， 结 
/人 1 4， < 


果 为 true， 因 为 spot 现 在 有 和 目 己 


fido.hasOwnProperty ("sitting"); 的 sitting 属 性 。 


N_ 但 对 fido 调 用 hasOwnProperty 时 ， 结 果 为 false。， 因 为 实 
例 fido 设 有 sitting 属 性 。 这 意味 着 fido 使 用 的 sitting 属 性 
及 在 原型 中 定义 的 ， 而 fido 从 原型 那里 继承 了 这 个 属性 ， 
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我 们 给 机 器 人 Robby 和 Rosie 添 加 了 一 项 新 功能 ， 现 在 它们 能 够 在 发 生 错误 时 通过 方 
法 reportError 进 行 报告 。 请 研究 下 面 的 代码 ， 特 别 要 注意 这 个 方法 是 从 什么 地 
: 狂 飞 、 方 获取 错误 信息 的 ， 以 及 这 个 方法 是 否 是 在 机 器 人 原型 中 定义 的 。 

请 在 下 面 写 出 这 些 代码 的 输出 : 


function Robot (name, year, owner) { 
this.name = name; 
this.year = year; 


this.owner = owner.; 


Robot .PrototyPe .makeLr = "ObjectsRUs"; 
Robot .prototype.errorMessage = "All systems go."; 
Robot .prototype.reportError = function() { 
console.log(this.name + " says " + this.errorMessage); 
}; 
Robot .prototype.spillWater = function() { 
this.errorMessage = "I appear to have a Short circuit!"; 


}> 


var robby new Robot("Robby", 1956, "Dr. Morbius"); 


Var rosie = new Robot("Rosie", 1962, "George Jetson'" ) ; 


rosie.reportError () ; 

robby .reportError () ; 

robby .spillWater () ; Robby 有 和 目 己 的 errorMessage 
rosie.reportError (); 属性 3? 

robby .reportError (); 


console.1log (obby .hasOwnProperty ("errorMessage")); 


console.1log (rosie.hasOwnProperty ("errorMessage")); 


Rosieo? 


Web 镇 小 狗 俱 乐 部 需要 你 
大 


在 本 章 中 ， 你 所 做 的 艰 吉 工 作 带 来 了 回报 。Web 镇 小 狗 俱 乐 部 见 到 你 有 关 小 狗 
对 象 的 工作 后 ， 立 即 意识 到 你 就 是 他 们 要 找 的 人 ， 决 定 邀 请 你 来 帮助 他 们 实现 
小 狗 表演 模拟 器 。 他 们 要 求 你 做 的 唯一 工作 是 更 新 构造 函数 Dog， 以 便 能 够 创 
建 表演 犬 。 归 根 结 | 表演 大 可 不 是 普通 的 狗 ， 它 们 不 仅 会 奔跑 ， 还 会 各 种 步 
法 ;它们 不 去 翻 垃 圾 箱 ， 而 是 喜欢 寻找 有 香味 的 东西 ;它们 不 揪 尾 乞 食 ， 而 是 
喜欢 妃 看 诱 分 不 放 。 


更 具体 地 说 ，Web 和 独 小 狗 俱乐部 需要 的 是 下 面 这 样 的 表演 大 。 













2 你 的 构造 函数 Dog 纺 写 得 从 
V3 让 们 竟 谍 六 请 你 来 开 
中 发 小 狗 表 hp 表 误 
人 省 点 独特 ， 要 有 额外 的 
Pe 的 读音 ) 


谢谢 ! Web 镇 小 狗 俱乐部 


stack(): 立正 。 . 
t() : 类 似 于 奔跑 。 这 个 方 站 

gal Se 个 字符 所 参数 ， 如 

walk、 i paceax gallop。 

bait(): i 上 小 、 狗 饱 餐 一 帜 。 

/人 小、 狗 诗 个 深 。 





groom(): 让 
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如 何 设 计 表 演 大 


我 们 将 如 何 设计 表演 犬 呢 ? 显然 ， 我 们 希望 利用 既 有 的 小 狗 代 码 ， 毕 葛 这 正 是 
Web 午 小 狗 俱乐部 最 惫 求助 于 我 们 的 原因 所 在 。 但 如 何 利 用 呢 ? 下 面 就 来 研究 


研究 。 













我 们 可 以 只 在 表演 大 实 
例 史 添加 这 些 方法 ， 但 
这 就 则 到 了 老路 上 ， 本 
章 开 头 揭示 的 所 有 问题 
都 会 出 现 。 












如 果 将 这 些 新 方法 添加 到 始 有 的 
攀 造 号 数 Dog 中 ， 所 有 的 小 狗 对 
象 都 将 能 够 做 这些 事情 。 达 有 悖 
于 我 们 的 初 惠 。 








如 果 我 们 从 关 开 始 创 
建构 造 鳃 数 ShowDog， 就 
得 重新 实现 所 有 的 基本 方 


法 : bark、run、sit 等 。 


你 现在 的 位 置 ， 589 


关于 原型 的 谈话 













大 家 别 着 急 上 火 。 使 用 
JavaSeriptedy ， 可 以 有 多 个 
原型 。 


Joe: 多 个 原型 ? 什么 意思 ? 


Judy: 束 像 你 得 到 的 遗产 。 





Joe: 什么 遗产 ? 我 要 是 有 遗产 的 话 ， 束 不 会 在 这 里 打工 了 。 开 什么 玩 突 ? 


Judy: 你 并 非 只 继承 了 父母 的 特质 ， 不 是 吗 ? 你 还 继承 了 祖父 母 、 外 祖父 母 、 
曾祖 父母 、 曾 外 祖父 母 等 的 一 些 特 质 。 


Joe: 没 错 ， 明 白 你 的 意思 ，。 
Judy: 在 JavaScript 中 ， 可 建立 供 对 象 继 承 的 原型 链 。 
Frank: 举 个 例子 吧 ， 这 样 可 能 会 有 所 帮助 。 
0 一 个 小 鸟 原型 ， 知 道 如 何 做 大 多 数 小 乌 都 会 做 的 事情 ， 如 飞 
周 。 
Frank: 明日 ， 残 像 我 们 的 小 狗 原 型 。 
Judy: 现在 假设 你 需要 实现 各 种 鸭子 一 一 绿 头 骸 、 红 头 鸭 等 。 
Frank: 别 忘 了 还 有 红 路 树 鸭 。 
Judy: 谢谢 Frank 提 醒 。 
Frank: 不 客气 。 我 也 是 刚 阅 读 《Head First 设计 模式 》， 才 知道 这 些 种 类 的 鸭子 。 


Judy: 好 吧 ， 但 鸭子 与 一 般 的 乌 不 同 。 它 们 会 游泳， 我 们 不 想 将 这 个 方法 放 在 小 乌 
原型 中 。 不 过 ， 在 JavaScript 中 ， 可 创建 一 个 继承 小 鸟 原型 的 鸭子 原型 。 

Joe: ”你 的 意思 是 说 ， 可 以 创建 指 疝 鸭子 原 型 的 构造 函数 Duck， 而 鸭子 原 型 又 指 问 
小 鸟 原型 ? 

Frank: 大 复杂 了 ， 请 详细 说 说 。 

Judy: Frank， 你 这 样 想 一 想 。 假 设 你 创建 了 一 个 鸭子 对 象 ， 并 对 其 调用 了 方法 El1y。 
如 果 在 该 对 象 中 查找 时 ， 没 有 找到 这 个 方法 ， 你 将 如 何 做 呢 ? 你 接着 在 鸭子 原型 中 
查找 ， 可 这 里 也 设 有 方法 Ely。 因 此 ， 你 继续 在 鸭子 原型 继承 的 小 鸟 原 型 中 查找 ， 并 
在 这 里 找到 了 方法 Ely。 

Joe: 如 采 我 们 调用 方法 swim， 将 首先 在 当前 鸭子 实例 中 查找 ， 但 找 不 到 。 因 此 我 
们 接着 在 鸭子 原型 中 查找 ， 并 找到 了 它 。 

Judy: 没 错 。 这 样 ， 我 们 不 仅 重 用 了 鸭子 原型 的 行为 ， 必 要 时 还 可 沿 原型 链 往 上 走 ， 
进而 使 用 小 鸟 原型 的 行为 。 

Joe: 这 上 听 起 来 非常 完美 ， 完 全 可 以 通过 扩展 小 狗 原 型 来 创建 表演 犬 原型 。 下 面 就 来 
看 看 如 何 做 。 








使 用 原型 


建立 原型 链 


咱们 来 萎 虑 如 何 建 立 原型 链 。 对 象 不 仅 可 以 继承 一 个 原型 的 属性 ， 还 可 继承 一 个 原型 
链 。 基 于 前 面 浪 虑 问题 的 方式 ， 这 并 不 难 理解 。 


假设 我 们 需要 一 个 用 于 创建 表演 厂 的 表演 犬 原型 ， 并 希望 这 个 原型 依赖 于 小 狗 原 型 提 
供 的 方法 park、run 和 wag。 下 面 束 来 建立 这 样 的 原型 链 ， 体 会 一 下 其 中 的 各 个 部 分 是 
如 何 协 同 工 作 的 。 


小 狗 原型 与 以 前 相同 。 这 个 原型 包含 每 个 小 狗 都 有 的 东西， 


\ f 属性 species 以 及 方法 bark、 run 和 wad 。 
为 简化 这 里 的 示意 图 ， 我 们 省 略 了 

个 入 时 一 赋 给 每 个 方法 的 函数 。 

species: "Canine" 


bark() 
run() 


wag!() 










我 们 依然 能 够 创建 需要 的 小 狗 实例 。 
这 些 实 例 直接 继承 小 狗 原 型 。 


本 ee ~ 
An be ey 
ee a mm 
Mi 
~ me 
mm 
An 
~ ~ 


me_ 
~ 和 ~ ™ 
An bd 
_ ss 
和 i 
~ 

































六 9 
表演 大 原型 
league: “Webville” name: “Fido” 
— We breed: “Mixed” 
RE 一 | weight: 38 
bait() ~ 
gait() ~ 
新 的 表 广 犬 原型 。 groom() 入 


我 们 还 需要 创建 表演 犬 ， 但 表演 犬 比 
较 特 殊 。 它 们 虽然 也 是 小 狗 ， 但 拥有 
普通 小 狗 没 有 的 种 种 行为 。 


入 








ShowDog 


name: “Scotty” 
breed: “Scottish Terrier” 
weight: 15 

handler: “Cookie” 


至 少 训 犬 师 是 这 人 径 
说 的 。 


注意 到 表演 犬 包含 所 有 随 每 个 实例 而 
异 的 属性 ， 加 name、breed、weight 和 


handler。 








下 面 将 创建 一 些 表演 犬 实例 ， 


如 这 里 的 苏格兰 梗 。 这 个 handler 指 的 是 训 犬 师 ， 负 责 牵 着 皮 
带 什 么 的 ， 可 别 将 其 与 事件 处 理 程序 混 
为 一 谈 。 


你 现在 的 位 置 ， 591 


原型 链 


原型 链 中 的 继 头 原理 














为 表演 大 建立 原型 链 后 ， 下 面 来 看 看 其 中 的 继承 原理 。 对 于 本 页 下 方 的 每 个 属性 和 方法 ， 
请 治 原 型 链 癌 上 找 出 它们 都 是 在 哪里 定义 的 。 


小 狗 原 型 


表演 大 原型 


褒 原型 链 寻 找 每 个 属性 ， 看 看 它们 都 身 


方法 bark 和 属 性 species 征 从 小 


狗 原型 那里 继承 而 来 的 。 
Pp 
在 这 里 
方法 stack 和 属性 league 是 从 表 
广 犬 原型 那里 继承 而 来 的 。 
we RY 
不 是 在 这 里 。” EE: 在 这 里 
属性 name 包 含 在 表 
广 厂 实例 中 。 
不 是 在 这 里 不 是 在 这 里 四 纲 杆 引 不 是 在 记 
qu “qu “qu > 
Cx cx « 
。 
4 ww 
训 “oo, 
CA 


处 何方 。 
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小 狗 原 型 


species: "Canine" 













bark() 
run() 


wag\() 





















前 









表演 大 原型 


league:“Webville” 





stack() 
bait() 


gait() 
groom() 










ShowDog 


name: “Scotty” 
breed: “Scottish Terrier” 
weight: 15 

handler: “Cookie” 








研究 这 里 列 出 的 每 个 方法 和 
属性 ， 看 看 它们 都 位 于 原型 
链 的 什么 地 方 。 


如 果 在 实例 中 找 不 到 ， 那 它 肯 定 是 从 表 演 犬 原型 或 小 狗 原 型 那里 


4 继承 而 来 的 。 





这 是 机 器 人 原型 。 > 


dl dl 
一 一 一 | 


是 太空 机 器 人 诛 型 。 name: "Robby" 








代 效 外 攻 由 


使 用 原型 


我 们 在 冰箱 上 又 贴 了 一 个 对 象 图 ， 但 也 被 人 弄 乱 了 。 你 能 帮忙 将 其 重新 组 合 起 来 吗 ? 与 前 
面 的 对 象 图 相 比 ， 这 个 对 象 图 新 增 了 一 些 太 空 机 器 人 ， 它 们 继承 了 机 器 人 的 属性 ， 重 写 了 
机 器 人 的 方法 speak， 还 新 增 了 方法 pilot() 和 属性 homePlanet。 请 注意 ， 有 些 冰 箱 贴 可 


能 是 多 余 的 ， 祝 你 好 运 | 





机 器 人 原型 


maker "ObjectsRUS"” 









Speak() 
makeCoffee() 
blinkLights() 











0 





Robot 







Robot 





name: "Rosie" 
year: 1962 
owner: "George Jetson" 


year: 1956 
owner: "Dr. Morbius" 











太空 机 器 人 原型 

















| Space Robot 








| Space Robot 





name: "C3PO" 
year: 1977 
owner: "L. Skywalker" 











name: "Simon" 
year: 2009 
owner: "Carla Diana" 
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创建 原型 链 


创建 表演 大 原型 


创建 小 狗 原型 时 ， 只 需 直 接 使 用 构造 函数 Dog 的 属性 prototype 提 供 的 空 
对 象 ， 在 其 中 添加 要 让 每 个 小 狗 实例 都 继承 的 属性 和 方法 即 可 。 

但 创建 表演 犬 原型 时 ， 我 们 必须 做 更 多 的 工作 ， 因 为 我 们 需要 的 是 一 个 继 
承 另 一 个 原型 (小 狗 原型 ) 的 原型 对 象 。 为 此 ， 我 们 必须 创建 一 个 继承 小 
狗 原型 的 对 象 ， 再 亲自 动手 建立 关联 。 

当前 ， 我 们 有 一 个 小 狗 原 型 ， 还 有 一 系列 继承 这 个 原型 的 小 狗 实例 ， 而 目 
标 是 创建 一 个 继承 小 狗 原型 的 表演 犬 原型 以 及 一 系列 继承 表演 犬 原型 的 表 
演 大 实例 。 















小 狗 原 型 


species: "Canine" 





这 就 是 我 们 受 实 
现 的 目标 。 


我 们 要 创建 一 个 表演 犬 原型 ， 
它 继承 小 狗 原型 …… 


们 已 经 有 一 个 小 狗 原 

还 有 一 个 继承 表 误 大 原 蛙 的 - 逻 1 继承 该 

1 型 ， 还 有 一 系 ? 
表演 犬 实例 。 原型 的 小 狗 实例 。 
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name: “Fido” 
breed: “Mixed” 
weight: 38 








使 用 原型 


首先 ， 需 要 一 个 继 永 小 狗 原 型 的 对 象 


前 面 说 过 ， 表 演 厂 原型 是 一 个 继承 小 狗 原型 的 对 象 。 要 创建 继承 小 狗 原型 
的 对 象 ， 最 佳 方式 是 什么 呢 ?” 其 实 就 是 前 面 创建 小 狗 实例 时 一 直 采 用 的 方 
式 。 你 可 能 还 记得 ， 这 种 方式 类 似 于 下 面 这 样 : 














要 创建 继承 小 狗 原型 的 对 象 ， 
[ 使 用 new 和 构造 函数 Dod 。 


5 5 二 人 人 
只 需 结 合 


《一 a 实 参 ， 其 
var aDog = new Dog(); 这 里 没有 给 构造 函数 提供 任何 实 允 其 中 
的 原因 将 稍 后 讨论 。 


上 述 代码 创建 一 个 继承 小 狗 原 型 的 对 象 ， 因 为 它 与 以 前 创建 小 狗 实 例 时 使 
用 的 代码 完全 相同 ， 只 是 没有 问 构 造 函 数 提供 任 何 实 参 。 为 什么 这 样 做 
呢 ?” 因 为 在 这 里 ， 我 们 只 需要 一 个 继承 小 狗 原 型 的 小 狗 对 象 ， 而 不 关心 



































Ti 
小 狗 原 型 
species: "Canine" 
bark() 
run() 
wag() 
我 们 新 建 了 一 个 小 狗 实 例 。 它 没有 属 ss 
性 name、breed 和 weight， 但 继承 了 小 7 TS 
狗 原型 ， 因 为 它 是 使 用 构造 函数 Dog 户 | 0g 一 
n 四 
创建 的 。 pind Dog 


wiI br name: “Fido” 
Wwé breed: “Mixed” 
一 | weight: 38 























当前 ， 我 们 需要 的 古 一 个 表演 三原 型。 与 其 他 小 狗 实例 一 样 ， 它 也 古 一 个 
继承 小 狗 原 型 的 对 象 。 下 面 来 看 看 如 何 将 这 个 至 的 小 狗 实 例 变 成 所 需 的 表 
演 犬 原型。 
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将 对 象 用 作 原 型 


接 下 来 ， 将 新 建 的 小 狗 突 例 变 成 表演 大 原型 


至 此 ， 我 们 有 了 一 个 小 狗 实例 ， 但 如 何 使 其 成 为 表演 犬 原型 呢 ” 为 此 ， 只 需 将 它 赋 给 构 
迄 畏 数 ShowDog 的 属性 prototype。 等 每， 我 们 还 没有 构造 国 数 ShowDog 呢 ， 下 面 束 
来 创建 它 : 


function ShowDog (name, breed, weight, handler) { 





this.name = name; 要 

这 个 构造 函数 接受 各 种 实 
this.breed = breed; 参 ， 用 于 设置 小 狗 的 属性 
this.weight = weight; (name、 breed、weight) 和 
this.handler = handler; 表 这 大 的 属性 (handler) 。 


有 了 这 样 的 构造 国 数 后 ， 便 可 将 其 属性 prototypPe 设 置 为 一 个 新 的 小 狗 实例 了 : 


我 们 原本 可 以 使 用 前 一 页 创建 的 小 狗 实例 ， 但 为 
2 一 少 使 用 一 个 变量 ， 这 里 没有 这 样 做 ， 而 是 直接 将 
ShowDog .prototype = new Dog () ; 一 个 新 小 狗 实例 赋 给 属性 prototype。 


来 看 看 我 们 到 了 哪 一 步 : 我 们 有 构造 函数 ShowDog， 可 用 来 创建 表演 犬 实例 。 我 们 还 
有 一 个 表演 太原 型 ， 它 是 一 个 小 狗 实例 。 

下 面 来 将 对 象 图 中 的 标签 “Dog” 改 为 “表演 犬 原型 ”， 确 保 它 准确 地 反映 了 这 些 对 
象 扮演 的 角色 。 但 别 忘 了 ， 表 演 犬 原型 依然 是 一 个 小 狗 实例 。 























”小 狗 原型 ”小 狗 原型 
Species: "Canine" Species: "Canine" 
bark() bark() 
run() run() 
wag!() wag() 











将 对 象 图 中 的 标签 “Dog” 
1 改 为 “ 表 这 犬 原型 O 























有 了 构造 国 数 ShowDog 和 表 锭 犬 原 型 后 ， 我 们 需要 回 过 头 去 补充 一 些 细节 。 我 们 将 次 
入 研究 这 个 构造 函数 ， 并 给 表演 犬 原型 添加 一 些 属性 和 方法 ， 让 表演 犬 具备 所 需 的 额外 
行为 。 
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该 引 全 原型 了 

我 们 设置 了 表演 大 原型 ， 但 当前 它 只 是 一 个 空 的 小 狗 实 例 。 现 在 该 给 它 添加 必 
性 和 行为 ， 让 它 更 像 表演 大 原型 了 ， 

要 给 表演 天 添加 的 属性 和 方法 如 下 ， 


function 


this. 


this 


ShowDog .prototype = 





添加 这 些 属 性 和 方法 后 ， 表 演 犬 原型 看 起 来 像 表 演 犬 了 。 下 面 再 次 修改 对 象 


.breed = breed.; 
this. 
this. 


ShowDog (name, breed, weight, handler) { 
name = name; 
< 一 一 别 忘 了 ， 构 造 函 数 ShowDog 看 起 来 与 构造 函数 Dog 很 像 。 
表演 三 也 有 属性 name、breed 和 weight， 但 还 有 一 个 额 
外 的 属性 handler， 表 示 负 责 训练 它 的 人 。 这 些 属 性 都 


是 在 表演 犬 实例 中 定义 的 。 


weight = weight; 


handler = handler; 


new Dog(); 


在 这 里 ， 我 们 获 
取 充 当 表 误 犬 诛 
型 的 小 狗 实 例 ， 


所 有 的 表 这 犬 都 将 加 人 入 
Web 镇 联盟 ， 因 此 我 们 在 












原型 中 添加 这 个 属性 。 
并 给 它 添 加 新 的 
属性 和 方法 。 
下 、 这些 是 表 许 大 支持 的 所 有 
4、 方法。 这 里 让 这 些 方法 尽 
4 / 可 能 简单 。 
入 _ 我 们 将 这 些 属性 都 添加 到 表演 
太原 型 中 ， 让 所 有 表演 犬 都 继 
承 它 们 。 
小 狗 原 型 
Species: "Canine" 
bark() 
run() 
wag() 








图 ， 创 建 一 个 表演 犬 并 对 其 进行 详尽 的 测试 。 看 到 结 东 后 ，Web 镇 小 狗 俱 乐 


部 肯定 会 激动 万 分 。 





” 表演 犬 原型 


league:“Webville” 










我 们 说 表演 太原 型 “扩展 ”了 小 狗 原 型 


Pp CHL 
马 恋 承 了 小 狗 原 型 酌 属 性 ， 并 添加 了 一 些 a 
新 属性 。 gait( 





groom() 
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创建 表演 大 


创建 表演 犬 实例 



























至 此 ， 我 们 只 需 做 最 后 一 件 事 : 创建 一 个 ShowDog 实 例 。 这 个 一 小 狗 原 型 

实例 将 从 表演 犬 原型 那里 继承 表演 犬 特有 的 属性 和 方法 。 男 外 ， species: "Canine" 

由 于 表演 犬 原型 是 一 个 小 狗 实例 ， 这 个 表演 犬 也 将 从 小 狗 原 型 | 

那里 继承 所 有 的 小 狗 行为 和 属性 。 因 此 它 像 其 他 小 狗 一 样 ， 也 wagl) 

能 够 发 出 叫 声 、 奔 跑 和 摇 尾 。 

下 面 列 出 了 前 面 编写 的 所 有 代码 ， 还 有 创建 表演 犬 实例 的 代码 : poo 
表演 大 原型 








league: “Webville” 





function ShowDog (name, breed, weight, handler) { stack() 
this .name = name; bait() 

gait() 
this .breed = breed; groom!() 
this.weight = weight; 


this.handler = handler; 









ShowDog .prototype = new Dog(); 


Showdog .prototype.league = "Webville"; 





ShowDog .prototype.stack = function() { 


console.log("Stack"); 这 就 是 我 们 的 表演 犬 实例 。 它 继承 了 表 

}; 演 犬 原型 ， 而 表演 犬 原型 又 继承 了 小 狗 原 
型 。 这 正 是 我 们 希望 的 。 如 果 你 回 过 头 去 

ShowDog .prototype.bait = function() { 看 第 592 页 ， 将 发 现 我 们 建立 了 所 需 的 原 
console.1log ("Bait"); 型 链 。 


上 


ShowDog .prototype.gait = function (kind) { 
console.log (kind + "ing"); 


上 


ShowDog .PrototyPe .groom = function() { 
console.1log ("Groom"); 新 创建 的 表演 犬 实例 scotty。 


) / 
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测试 表演 厂 


请 将 前 一 页 的 所 有 代码 以 及 下 面 的 测试 代码 添加 到 一 个 网 页 中 ， 
对 scotty 进 行 详 尽 的 测试 。 另 外 ， 顺 便 创 建 儿 个 表演 犬 实例 ， 


并 对 它们 进行 测试 。 Sascnpt 和 人 
这 是 我 们 得 到 Stack 
Scotty . Stack () ; 的 结果 
明 乒 不。 一 > Scotty says Yip! 


scotty .bark () ; 


Webville 
CaniIne 


console .Log(scotty . LIeague) ; 


console.log(scotty. species),，; 








轮 到 你 了 。 在 机 器 人 行列 中 添加 一 些 太空 机 器 人 。 这 些 太空 机 器 人 能 做 到 机 器 人 能 做 的 
3 所 有 事 ， 但 它们 还 有 一 些 额外 的 行为 。 请 补 全 下 面 的 代码 ， 并 对 其 进行 测试 。 继 续 往 下 
练习 。 阅读 前 ， 请 查看 本 章 示 尾 的 答案 。 





function SpaceRobot (name, year, owner, homePlanet) { 


SpaceRobot .prototype = new 7 


.SPeak = function() { 
alert(this.name + " says Sir, If I may Venture an opinion..."); 


}; 


.Pilot = function() { 
alert(this.name + " says Thrusters? Are they important?"); 


}; 


Var C3po = new SpaceRobot("C3PO", 1977, "Luke Skywalker", "Tatooine"); 
c3po .speak (); 

c3po.pilot(); 

console.log(c3po.name + " was made by " + c3po.maker); 


Var simon = new SpaceRobot ("Simon", 2009, "Carla Diana", "Earth"); 
simon .makeCoffee () ; 

simon.blinkLights (); 

simon. speak () ; 
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测试 对 象 构造 函数 的 练习 


我 们 来 更 深入 地 研究 一 下 前 面 创 建 的 各 个 小 狗 。 前 面 对 Fido 进 行 了 测试 ， 发 现 它 确 
oO 实 是 小 狗 ， 下 面 来 看 看 它 是 否 也 是 表演 犬 (我 们 认为 它 不 是 ) 。Scotty 呢 ?前 面 通 
: 知 习 - 过 测试 确定 了 蕊 是 表演 大 ， 但 它 也 是 小 狗 吗 ? 我 们 不 确定 。 下 面 顺便 来 测试 一 下 
Fido 和 Scotty， 看 看 它们 都 是 使 用 哪个 构造 函数 创建 的 。 





Var fido = new Dog ("Fido", "Mixed", 38); 代码 ， 并 在 下 面 
0 ， 


J 这些 
if (fido instanceof Dog) { 人 ” 记录 你 得 到 的 输出 。 


console.log("Fido is a Dog"); 
} 
if (fido instanceof ShowDog) { 


console.log("Fido is a ShowDog") ; 


Var Scotty = new ShowDog ("Scotty", "Scottish Terrier", 15, "Cookie"),; 
If (scotty instanceof Dog) I{ 
console.log("Scotty is a Dog"); 
} 
If (scotty instanceof ShowDog) { 
console.log("Scotty is a ShowDog"); 
} 
console.log("Fido constructor is " + fido.constructor); 


console.log("Scotty constructor is "+ scotty.constructor); 


JavaScript 控 制 台 


将 你 得 到 的 输出 
记录 在 这 里。 


> 





一 页 列 出 了 我 们 
得 到 的 输出 。 


研究 纤 匀 结果 


前 一 个 练习 的 输出 如 下 : 


Fido 是 小 狗 ， 这 符合 我 们 的 
预期 。 输 出 没有 指出 Fido 是 表 
演 犬 ， 因 此 它 肯定 不 是 表 广 
犬 ， 这 也 合情合理 。 


JavaScript 控 制 台 

Fido is a Dog 
Scotty is a Dog 
Scotty is a ore Blele | 


Scotty 既 是 小 狗 又 是 
表演 三 ， 这 合情合理 。 
但 instanceof 是 怎么 知 
道 这 一 点 的 呢 ? 


Fido constructor is function Dog. . . 
7 Scotty constructor is function Dog. . . 
这 有 点 不 可 思议 。 结 果 表 明 ，Fido 
和 Scotty 都 是 使 用 构造 函数 Dog 创 
建 的 ， 但 我 们 创建 Scotty 时 ， 使 
用 的 可 是 构造 函数 ShowDog 呀 | 


目 相 


根 想 为 何 会 是 这 样 的 结果 。 首 先 ，Fido 显 然 只 是 小 狗 ， 而 不 古 表演 犬 。 事 实 一 一 了 





上 ， 这 完全 符合 我 们 的 预期 ， 毕 况 Fido 是 使 用 构造 函数 Dog 创 建 的 ， 而 这 个 构 
造 函 数 与 表演 犬 一 点 关系 邦 没 有 。 


接 下 来 ，Scotty 既 是 小 狗 又 是 表演 犬 。 这 也 合情合理 ， 不 过 怎么 会 出 现 这 样 
的 结果 呢 ? 这 是 因为 instanceof 不 仅 考 虑 当前 对 象 的 类 型 ， 还 考虑 它 继承 
的 所 有 对 象 。Scotty 虽 然 是 作为 表演 犬 创建 的 ， 但 表演 犬 继承 了 小 狗 ， 因 此 
Scotty 也 是 小 狗 。 


再 接 下 来 ，Fido 有 的 构造 函数 为 Dog。 这 合情合理 ， 因 为 它 就 古 使 用 这 个 构造 函 
数 创建 的 。 


最 后 ，Scotty 的 构造 国 数 也 是 Dog。 这 不 合理 ， 因 为 它 是 使 用 构造 图 数 
ShowDog 创 建 的 。 到 底 是 怎么 回 事 呢 ? 先 来 看 看 这 是 如 何 得 到 的 : 查看 属性 
scotty.constzuctor。 由 于 我 们 没有 显 式 地 为 表演 大 设置 这 个 属性 ， 它 将 
从 小 狗 原 型 那里 继承 该 属性 。 

为 何 会 这 样 呢 ? 坦率 地 说 ， 这 是 一 个 需要 修复 的 漏洞 。 正 如 你 看 到 的 ， 如 末 
我 们 不 显 式 地 设置 表演 犬 原型 的 属性 constructor， 就 没 人 会 这 样 做 。 不 过 ， 
即便 我 们 不 这 样 做 ， 一 切 也 都 将 正常 运行 ， 但 访问 scotty.constructor 时 ， 
结果 将 不 是 预期 的 ShowDog， 让 人 感到 迷惑 。 


不 用 担心 ， 下 面 就 来 修复 这 个 问题 。 








1 
\, 














你 现在 的 位 置 ， 


使 用 原型 
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Fido is a Dog 

Scotty is a Dog 

Scotty is a ShowDog 

Fido constructor is function Dog... 
Scotty constructor is function Dog... 





JavaScript 控 制 台 

Fido is a Dog 

Scotty is a Dog 

Scotty is a ShowDog 

Fido constructor is function Dog... 
Scotty constructor is function Dog... 


JavaScript 控 制 台 

Fido is a Dog 

Scotty is a Dog 

Scotty is a ShowDog 

Fido constructor is function Dog... 
Scotty constructor is function Dog. . . 


JavaScript 控 制 台 


Fido is a Dog 

Scotty is a Dog 

Scotty is a ShowDog 

Fido constructor is function Dog.. . 


Scotty constructor is function Dog. . . 
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最 后 的 整理 


只 要 对 代码 做 最 后 的 整理 ， 就 可 以 将 其 交付 给 Web 镇 小 狗 俱乐部 了 。 总 共 


需要 修复 两 个 小 回 题 。 


首先 ， 正 如 你 看 到 的 ， 没 有 正确 地 设置 表演 三 实例 的 属性 constructor: 
它们 从 小 狗 原 型 那里 继承 了 这 个 属性 。 需 要 浴 清 的 一 点 是 ， 虽 然 代码 都 
没 问 题 ， 但 给 对 象 设置 正确 的 构造 国 数 是 一 种 最 佳 实 践 ， 以 免 有 一 天 吃 
位 开发 人 员 接 手 这 些 代码 并 查看 表演 大 对 象 的 情况 时 感到 迷惑。 

为 修复 属性 constructor 不 正确 的 问题 ， 需 要 在 表演 大 原型 中 正确 地 设 
置 它 。 这 样 ， 创 建 表演 大 实例 时 ， 它 将 继承 正确 的 constructor 属 性 ， 
如 下 所 示 : 














function ShowDog (name, breed, weight, handler) { 
this.name = name; 
this .breed = breed; 
this.weight = weight; 
this.handler = handler; 


} 


获取 表演 犬 原型 ， 将 其 属性 constructor 显 式 地 
ShowDog .prototype = new Dog(); 


比 “设置 为 构造 函数 ShowDog。 


人 让 了 ， 这 只 是 一 种 最 佳 实践 ， 即 便 不 这 样 
-1 1 


C0 的 全 兰 。 现 在 ， 如 果 再 次 检 _ ope 
这 就 是 需要 做 的 全 部 工作 。 现 在 ， 如 果 再 次 检 侯 ， 代 码 也 将 像 预期 的 那样 运行 。 


查 Scotty， 其 属性 constructor 将 正确 无 误 ， 其 


他 所 有 表演 犬 实例 也 如 此 。 请 和 注意， 无需 对 小 狗 原型 这 样 做 ， 因 为 其 属性 


constructor 的 默认 设置 就 是 正确 的 。 


请 再次 运行 前 面 的 测试 ， 并 核实 表演 大 实例 Scotty 的 构造 函数 正确 无 误 。 





:如 

毕 习 - JavaScript 控 制 台 
0 _ Fido i 

这 是 我 们 得 到 的 输出 ， 注 意 到 Scotty 的 < 四 Dog 
构造 函数 现在 是 ShowDog 了 。 eg 


Scotty is a ShowDog 
Fido constructor is function DL ele 


Scotty constructor is function ShowDog... 
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继续 清理 


还 有 一 个 地 方 可 以 请 理 : 构造 畏 数 ShowDog 的 代码 。 再 来 看 一 
眼 这 个 构造 图 数 : 
function ShowDog (name, breed, weight, handler) { 
this.name = name; 
this.breed = breed.; 


this .weight = weight; ) < 一 一 一 一 你 可 能 没有 注意 到 ， 构 造 函 
this.handler = handler; 数 Dog 也 包含 这 些 代 码 。 


} 
正如 你 在 本 书 中 看 到 的 ， 每 当 我 们 发 现 重 复 的 代码 时 ， 警 报 就 会 

















大 啊 。 束 这 里 而 言 ， 既 然 构造 国 数 Dog 已 经 知道 如 何 完 成 这 些 工 有 个 缩 略 语 可 以 表示 这 种 玄 降 
作 ， 为 何不 让 它 去 做 呢 ? 另外 ， 虽 然 这 个 示例 的 代码 很 简单 ， 但 重复 代码 的 理念 : I 
有 些 构造 函数 可 能 使 用 复杂 的 代码 来 计算 属性 的 初始 值 。 因 此 创 九 。 Repeat Nov 各 的 程序 吕 者 这 
建 继 承 另 一 个 原型 的 构造 函数 时 ， 都 不 应 重复 既 有 的 代码 。 下 面 ”0 
来 修复 这 个 问题 一 一 先 重 写 代 码 ， 再 详细 介绍 它们 : 

function ShowDog (name, breed, weight, handler) { 这 行 代码 重用 构造 函数 Dog 中 处 理 属性 

name、breed 和 weight 的 代码 。 
this.handler = handler; Ea 
} 但 这 里 依然 需要 处 理 属性 handler， 轩 为 构造 


消 数 Dog 对 这 个 属性 一 无 所 知 。 


正如 你 看 到 的 ， 在 构造 图 数 ShowDog 中 ， 我 们 调用 了 方法 Dog.cal1， 

以 此 替换 了 那些 重复 的 代码 。 这 里 的 原理 如 下 : cal1 是 一 个 内 置 方法 ， 

可 对 任何 函数 调用 它 〈 别 忘 了 ，Dog 是 一 个 国 数 ) 。Dog.call 调 用 冰 

数 Dog， 将 一 个 用 作 this 的 对 象 以 及 国 数 Dog 的 所 有 实 参 传递 给 它 。 下 

面 来 详细 介绍 这 行 代码 : 这 行 代 码 调用 构造 函数 
Doqg， 并 让 其 中 的 this 指 同 


上 一 一 当前 的 ShowDog 实 例 。 这 


各 数 this 指 定 了 量 丈 Dog 中 样 ， 构 造 范 数 Dog 将 设置 
Dog 是 要 调用 this 指 向 的 对 儿 。 de 当前 ShowDog 对 象 的 属性 
常 调用 Dog 时 指 name、 breed 和 0weight。 


改定 的 实 参 相 同 。 
Dog.call (this, name, breed, weight); 


的 函数 。 


这 里 调用 了 Dog 的 方法 call， 导 致 范 数 Dog 补 调用 。 这 时 
之 所 以 调用 方法 call， 而 不 直接 调用 Dog， 是 因为 这 样 
可 以 控制 this 的 值 。 


你 现在 的 位 置 ， 603 


使 用 调用 方法 


Dog.call 溯 解 


为 何 使 用 Dog.cal1 来 调用 Dog 呢 ? 这 有 点 不 太 好 理解 ， 下 面 来 详细 


解释 ， 先 列 出 修改 后 的 代码 : 


重 用 构造 函数 Dog 中 的 代码 来 


function ShowDog (name, breed, weight, handler) { 给 属性 name、 breed 和 weidqht 


Dog.call (this, name, breed, weight); 
this.handler = handler; 


< 一 一 赋值 。 


但 构造 函数 Dog 对 属性 handler 一 无 所 知 ， 


四 此 必须 在 构造 函数 ShowDog 中 处 理 它 ， 


其 中 的 工作 原理 是 什么 样 的 呢 ? 你 可 以 这 么 想 ， 首先 ， 使 用 


一 A 放生 


运 异 付 


new 调 用 ShowDog。 前 面 说 过 ， 运 算 符 new 新 建 一 个 空 对 象 ， 并 将 其 


赋 给 构造 图 数 ShowDog 中 的 变量 this。 


var Scotty = new ShowDog ("Scotty" ， "Scottish TezLzIezr"，15，"Cookie") ; 


接 下 来 ， 我 们 执行 构造 函数 ShowDog 的 代码 。 在 这 个 构造 函数 中 ， 我 
们 首先 做 的 是 使 用 方法 call 来 调用 Dog。 这 样 调用 Dog 时 ， 我 们 传 入 了 name: 
this， 还 将 形 参 name、breed 和 weight 作 为 实 参 传递 给 它 。 








function ShowDog (name, breed, weight, handler) { 


Dog.call (this, name, breed, weight); 
















ShowDog 





breed: 
weight: 
handler: 


+his 





在 构造 函数 Dog 
中 ，this 指 同 的 是 


央 们 像 通常 那 样 执行 function Dog(name, breed, weight) { 运算 符 new 新 建 的 
构造 函数 Dog 的 代码 ， 一 this .name = name; ShowDog 对 象 。 

只 是 其 中 的 this 指 向 this .breed = breed:; 

的 是 一 个 ShowDog 对 this.weight = weight; 


象 ， 而 不 是 Dog 对 铭 。 


this.handler = handler; 
} 


构造 冰 数 Dog 执 行 完 毕 后 ( 别 忘 了 ， 我 们 调用 它 时 没有 
使 用 运算 符 new， 因 此 它 不 会 返回 任何 对 象 ) ， 接 着 执 
行 ShowDog 中 的 其 他 代码 ， 将 形 参 nangdler 的 值 赋 给 
属性 this.hnandler。 接 下 来 ， 因 为 我 们 调用 ShowDog 
时 使 用 了 运算 符 new， 所 以 将 返回 一 个 设置 了 属性 
name、 breed. weight 和 handler 的 ShowDog 实 例 。 
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人 
码 给 


交 造 函 教 Dog 的 代 2 
Lhig 对 铺设 置 了 这 三 | 


属性 。 












ShowDog 


name: “Scotty” 
breed: “Scottish Terrier” 
weight: 15 
handler: “Cookie* 





构造 函数 ShowDog 的 代码 
给 this 对 象 设置 了 这 个 属 
性 。 










夏 后 的 测试 


很 好 ， 你 的 设计 精彩 绝伦 ，Web 镇 小 狗 俱乐部 肯定 很 满意 。 下 
面 对 各 个 小 狗 做 最 后 一 次 测试 ， 展 示 一 下 它们 具备 的 能 


function ShowDog (name, breed, weight, handler) { 
Dog.call (this, name, breed, weight).,; 
this.handler = handler; 

' 

ShowDog .prototype = new Dog(); 

ShowDog .prototype.constructor = ShowDog; 

ShowDog .prototype.league = "Webville"; 

ShowDog .prototype.stack = function() { 


部 肯定 会 喜欢 我 们 


的 设计 ! 





Web 镇 小 狗 俱 乐 







乐 。 将 showDog 的 所 有 代码 整合 在 一 起 ， 


ee Se 并 加 入 包含 Dog 代 码 的 文件 中 ， 以 便 
) 对 其 进行 测试 。 


ShowDog.PzototyPe .bailit = function() { 
console .Log("Bait'" ) ; 


}; 

ShowDog .prototype.gait = function (kind) { 
console.log (kind + "ing"); 

}; 

ShowDog .prototype.groom = function() { yA 


console.log ("Groom"); 


Var fido = new Dog("Fido", "Mixed", 38); 
Var fluffy = new Dog ("Fluffy", "Poodle", 30); 
var spot = new Dog("Spot", "Chihuahua", 10); 


下 国正 


创建 几 个 小 狗 和 几 个 
表演 犬 。 


Var Scotty = new ShowDog ("Scotty", "Scottish Terrier", 15, "Cookie"); 


Var beatrice = new ShowDog ("Beatrice", "Pomeranian", 5, "Hamilton"),; 


fido.bark () ; 

fluffy.bark() ; 上 一 将 这 些小 狗 和 表演 犬 拉 
出 来 多 名， 核实 它们 都 

能 做 到 正确 的 事 。 

scotty .bark () ; 

beatrice.bark (); NU 了 


Scotty .gait("NWalLk'") ; 


SPot .bark (); 


beatrice.groom() ; 


JavaScript 控 制 台 

Fido says Woof! 
Fluffy says Woof! 
Spot says Yip! 
Scotty says Yip! 


Beatrice says Yip! 
Walking 


leh qele) i 


你 现在 的 位 置 ， 





使 用 原型 
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关于 原型 的 问题 


DS 

肥 ) ; 前 面 调用 构造 函数 Dog 来 创建 
用 作 表 演 大 原型 的 小 狗 实 例 时 ， 没 
有 指定 任何 实 参 。 这 是 为 什么 ? 


AAA ， 

吟 "， 因 为 对 于 这 个 小 狗 实 例 ， 我 们 
唯一 的 要 求 是 它 继 承 了 小 狗 原 型 。 这 
个 小 狗 实 例 不 像 Fido 和 Fluffy 那 样 是 
具体 的 小 狗 ， 而 只 是 一 个 继承 小 狗 原 
型 的 通用 小 狗 实 例 。 


另外 ， 所 有 继承 表演 犬 原型 的 小 狗 都 
侠义 了 自己 的 属性 name、breed 和 
weight。 因 此 即便 用 作 表 演 犬 原型 
的 小 狗 实 例 给 这 些 属性 设置 了 值 ， 我 
们 也 根本 看 不 到 这 些 值 ， 因 为 表演 三 
实例 总 是 重 写 这 些 属 性 。 


人 
各 ) : 那么 ， 在 用 作 表 演 大 原型 的 
小 狗 实 例 中 ， 这 些 属性 是 怎么 样 的 
呢 ? 


AAA ， 
只 >。 根本 没有 给 它们 赋值 ， 因 此 它 
们 都 是 未 定义 的 。 


[9) s 如 果 没 有 将 ShowDog 的 属性 
prototype 设 置 为 一 个 小 狗 实 例 ， 
结果 将 如 何 ? 


AAA ， 

吟 ' ， 所 有 的 表演 犬 都 不 会 有 问题 ， 
但 它们 不 会 继承 小 狗 原 型 的 任何 行 
为 。 这 意味 着 它们 不 能 发 出 叫 声 、 奔 
跑 和 据 尾 ， 也 不 包含 值 为 Canine 的 
属性 species。 你 可 以 自己 试 一 试 : 
把 将 ShowDog .prototype 设 置 为 new 
Dog () 的 那 行 代码 注释 掉 ， 再 尝试 
让 Scotty 发 出 叫 声 。 结 果 将 如 何 呢 ? 
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生生 ANnD=E 
[em ms | 图 用 一 
-1 | ”一 二 一 


世上 没有 
晶 敬 的 问题 


人 
加 )】 ; 可 以 创建 一 个 对 象 字面 量 
再 将 其 用 作 原 型 吗 ? 


Bd 


AAA ， 

吟 '， 可以。 可 将 任意 对 象 用 作 表 演 
犬 原型 当然， 如果 你 这 样 做 ， 表 演 
犬 将 不 会 从 小 狗 原 型 那里 继承 任何 东 
西 ， 而 是 继承 你 在 这 个 对 象 字 面 量 中 
定义 的 属性 和 方法 。 


y 
[9) 对 于 将 ShowDog .prototype 
设置 为 一 个 小 狗 实 例 的 代码 ， 我 
不 小 心 将 其 放 在 了 创建 表演 大 实例 
Scotty 的 代码 之 后 。 这 会 导致 有 些 代 
码 不 能 正确 运行 吗 ? 请 说 明 其 中 的 
原因 。 


AAA ， 

合 "， 创建 表演 犬 实例 Scotty 时 ， 将 
获取 赋 给 ShowDog.prototype 的 原型 。 
此 ， 对 于 将 ShowDog .prototype 
设置 为 一 个 小 狗 实 例 的 代码 ， 如 
果 你 将 其 放 在 创建 Scotty 的 代码 后 
面 ，Scotty 将 是 一 个 不 同 于 其 原型 
(构造 涵 数 ShowDog 上 默认 创建 的 对 
象 ) 的 对 象 ， 它 不 包含 小 狗 原 型 的 
任何 属性 。 创 建构 造 串 数 ShowDog 
后 ， 应 首先 设置 其 原型 并 在 这 个 原 
型 中 添加 所 需 的 属性 和 方法 ， 然 后 
创建 ShowDog 实 例 。 


人 

上 a) ;如 果 我 修改 小 狗 原型 的 属性 ， 
如 将 属性 species 的 值 从 Canine 
改 为 Feline， 是 否 会 影响 到 我 之 前 
创建 的 表演 犬 ? 


AAA ， 

只 ， 会 影响 。 对 原型 作 任何 
修改 都 将 影响 直接 或 间接 继承 
该 原型 的 所 有 实例 。 


a ® 

人 o] ;对 原型 链 的 长 度 有 限制 吗 ? 
AAA ， 

只 理论 上 没有 ， 但 实际 上 可 能 
有 。 原 型 链 越 长 ， 解 析 方 法 或 属性 
时 需要 做 的 工作 越 多 。 虽 然 如 此 ， 
但 运行 时 系统 通常 极其 擅长 优化 这 
种 查找 工作 。 


一 般 而 言 ， 设 计 不 需要 包含 大 量 的 继 
承 层 级 ， 如 果 出 现 这 样 的 情况 ， 也 
许 就 该 重新 审视 一 下 你 的 设计 了 。 


加 )】 ; 加 果 还 需 创 建 另 一 类 小 狗 ， 
如 比赛 大 ， 该 怎么 办 昵 》 可 创建 一 
个 比赛 大 原型 ， 让 它 像 表 演 犬 原型 一 
样 继承 小 狗 原型 吗 ? 


AAA ， 
份 "， 可 以 ， 为 此 ， 你 需要 再 创建 一 
个 用 作 比 赛 大 原型 的 小 狗 实 例 ， 这 
样 准备 工作 就 做 好 了 ， 然 后 就 可 以 
像 创 建 表演 太原 型 那样 创建 比赛 大 
原型 了 。 





小 狗 原 型 


Species: "Canine" 








bark() 
run() 
wag() 














| ”表演 犬 原型 比赛 犬 原型 











bi 


league: “Webville” 


league: “Objectville” 














stack() crossDrive() 
bait() awayDrive() 
gait() shedding() 
groom() singling() 








ShowDog 














CompetitionDog 





name:“Scotty” name: “Ci” 

breed: “Scottish Terrier” breed: “Border Collie” 
weight: 15 weight: 28 

handler: “Cookie” handler: “Mark” 
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~ 


使 用 原型 


小 狗 原 型 并 非 原 型 链 的 终点 


前 面 介绍 了 两 个 原型 链 。 第 一 个 原型 链 包 含 从 中 派生 后 型 链 的 终点 为 Object。 
出 小 狗 对 象 的 小 狗 原型 ， 第 二 个 原型 链 包 含 从 中 派生 | 
出 表演 犬 的 表演 犬 原型 ， 而 表演 犬 原型 又 是 从 小 狗 原 Object 
型 派生 出 来 的 。 
在 这 两 个 原型 链 中 ， 终 点 都 是 小 狗 原型 吗 ? 实际 上 不 [Ts 
是 ， 因 为 小 狗 原 型 是 从 Object 派 生出 来 的 。 所 有 对 象 都 是 从 Object 证 hasOwnProperty() 

生 而 来 的 。 // 其 他 方法 








事实 上 ， 你 创建 的 每 个 原型 链 的 终点 都 是 Object。 
这 是 因为 对 于 你 创建 的 任何 实例 ， 其 默认 原型 都 是 
Object， 除 非 你 对 其 进行 了 修改 。 














: 小 狗 原型 
Object 是 什么 2 ee 
可 将 Object 视 为 对 象 始祖 ， 所 有 对 象 都 是 从 它 派 生 而 来 bark( 
的 。obJject 实 现 了 多 个 重要 的 方法 ， 它 们 是 JavaScript 对 run() 
象 系统 的 核心 部 分 。 在 日 常 工作 中 ， 这 些 方法 中 的 很 多 Weg 




















你 都 不 会 用 到 ， 但 有 几 个 经 常会 用 到 。 A 

你 在 本 章 前 面 就 见 到 过 其 中 一 个 : nasOwnProperty。 

每 个 对 象 都 继承 了 这 个 方法 ， 因 为 归根 结 底 ， 每 个 对 象 ee 

都 是 从 object 派 生 而 来 的 。 别 忘 了 ， 在 本 章 前 面 ， 我 们 表演 大 原 蛙 
league: “Webyville” 


使 用 了 方法 hasOwnPzroperty 来 确定 属性 是 在 对 象 实例 





还 是 其 原型 中 定义 的 。 se 
al 
Object 定 义 的 男 一 个 方法 是 toSstring， 但 实例 通常 会 gait() 








RE RE 四 groom!() 
重 写 它 。 这 个 方法 返回 对 象 的 字符 串 表 示 。 稍 后 将 演示 


如 何 重 写 这 个 方法 ， 为 对 象 提供 更 准确 的 接 述 。 





ShowDog 
name: “Scotty” 
breed: “Scottish Terrier” 
weight: 15 
handler: “Cookie” 


作为 原型 的 Object 


你 可 能 没有 意识 到 ， 你 创建 的 每 个 对 象 都 有 原型 ， 该 
原型 默认 为 Object。 你 可 将 对 象 的 原型 设置 为 其 他 对 
象 ， 就 像 我 们 对 表演 犬 原型 所 做 的 那样 ， 但 所 有 原型 
链 的 终点 部 是 Object。 











重 写 方法 toString 


> 4 用 pS oD, 
充分 发 挥 继 水 的 了 咸 妃 乙 重 和 写 肉 置 行 为 
继承 内 置 对 象 时 ， 可 重 写 这 些 对 象 定 义 的 方法 。 一 种 稼 见 的 情形 是 ， 重 
写 Object 定 义 的 方法 toString。 所 有 对 和 象 都 是 从 0bject 派 生 而 来 
的 ， 因 此 所 有 对 象 都 可 使 用 方法 toString 来 获取 其 简单 的 字符 串 表 


示 。 例 如 ， 要 在 控制 台中 显示 对 象 ， 可 结合 使 用 console.1log 和 方法 


toStrings 

function Robot (name, year, owner) { JavaScript 控 制 台 
this.name = name; 
this.year = year; 

this.owner = owner; 


[Object object] 


} 





Var toy = new Robot("Toy", 2013, "Avary"); 人 
从 Object 继承 而 来 的 方法 
console.1log (toy.toString()); to5tring 在 显示 对 象 方面 做 
得 并 不 好 。 





如 你 所 见 ， 在 将 机 器 人 对 象 Eoy 转 换 为 字符 串 方 面 ， 方 法 toStzing 
做 得 并 不 好 。 为 解决 这 个 问题 ， 可 重 写 方法 toString， 让 其 为 机 侨 并 
人 对 象 创建 独特 的 字符 器: 


avaScript 探 制 台 
Toy Robot belonging to Avary 





function Robot (name, year, owner) { 


// 相同 的 代码 





} 


情况 好 多 了 ! 现在 使 用 的 是 目 定 
义 方法 toString。 





Var toy = new Robot("Toy", 2013, "Avary"); 


console.1log(toy.toString()); 








请 注意 ， 在 有 些 情况 下 ,会 自动 调用 方法 toString, 无 
需 你 直接 调用 它 。 例 如 ， 如 有 果 你 使 用 运算 符 + 来 拼接 字符 
串 和 对 象 ，JavaScript 将 自动 调用 方法 toString 将 对 象 转 
换 为 字符 串 ， 再 将 该 字符 串 与 另 一 个 字符 串 拼 接 起 来 。 





玩具 ? 这 个 机 器 人 运行 
着 一 个 Arduino 栈 ， 可 使 用 
JavaSeript 进 行 控制 ! 


console.log("Robot is: " + toy); 


调用 方法 toString 将 对 象 toy 转 换 为 一 个 了 符 串 ， 再 进行 拼接 。 如 果 toy 重 
写 了 方法 toString， 将 使 用 重 写 后 的 方法 。 
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使 用 原型 


Te 十 HH 

危险 地 带 

一 旦 你 开始 重 写 属性 和 方法 ， 就 很 容易 上 痘 。 重 写 内 置 对 象 的 属性 和 方法 
上 时， 一 定 要 特别 小 心 ， 否 则 可 能 改变 其 他 依赖 于 这 些 属 性 来 完成 特定 工作 
的 代码 的 行为 。 

因此 ， 如 杂 你 打算 重 写 Object 的 属性 ， 请 先 阅 读 这 里 的 安全 指 两 ， 人 否则 可 
能 会 以 意 想 不 到 的 方式 破坏 既 有 的 代码 。 ( 换 而 言 之 ， 可 能 引发 难以 发 现 
的 bug。) 





不 可 旦 与 


千 万 不 要 重 写 Object 的 如 下 属性 : 


a i 
属性 constructor 指 向 与 这 个 原 型 相关 联 的 构造 


4 一 一 数 . 
Constructor 


尔 知道 这 个 方法 的 作用 。 
hasOwnProperty ee 
isPrototype 是 一 个 方法 ， 用 于 判断 一 个 对 象 是 否 是 
isPrototyPeoOf 另 一 个 对 狂 的 原型 。 
方法 propertylsEnumerable 用 于 判断 通过 迭代 对 象 


ropertyIsEnumerabl 
property S 全 的 所 有 属性 是 否 可 访问 指定 的 属性 ， 


可 以 重 与 


熟悉 原型 并 知道 如 何 安全 地 重 写 属性 后 ， 就 可 以 重 写 Object 的 
如 下 属性 了 : 


、 
去 。 它 类 化 :7 ， 也 将 对 象 转换 为 子 
toLocalString 是 一 个 方 法 。 它 类 似 于 toString 


符 串 人 SY 富 这 个 方法 ， 可 提供 撕 述 对 象 的 本 地 化 字符 串 【四 
9 4 的 母语 表示 的 字符 串 ) 。 

toLocaleString 办 、 
valueOf 是 男 一 个 可 以 重 写 的 方法 。 它 默认 情况 下 在 返回 当前 对 


valueof ”一 象 ， 但 通过 重 写 ， 可 让 它 返回 你 希望 的 其 他 值 。 
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扩展 内 置 行为 


充分 发挥 继 永 的 威力 之 扩展 内 置 对 系 


你 知道 ， 通 过 给 原型 添加 方法 ， 可 给 其 所 有 实例 添加 新 功能 。 这 不 仅 适 用 
于 目 定义 对 象 ， 还 适用 于 内 萤 对 象 。 





束 拿 String 对 人 象 来 说 吧 ， 你 在 代码 中 使 用 了 string 对 和 象 的 substring 我 们 通常 将 字符 串 视 为 基本 
等 方法 ， 但 如 条 要 添加 新 方法 ， 让 所 有 Stzing 实 例 都 能 使 用 它 ， 该 如 何 类 型 ， 但 它们 也 有 对 象 的 形 
办 呢 ? 可 将 表面 介绍 的 对 象 扩展 技巧 用 于 String 原 型 。 式 。 作 去 时 ，JavaScript 会 


责 将 字符 串 转 换 为 对 象 。 
假设 我 们 想 用 一 个 名 为 cliche 的 方法 扩展 String 原 型 。 这 个 方法 会 在 字 
符 串 包含 一 个 众所周知 的 俗语 时 返回 true。 下 面 就 是 我 们 的 代码 : 


在 这 里 ， 我 们 给 String 的 原型 添加 


V 了 方法 cliche。 


Var cliche = ["lock and load","touch base", "open the kimono"]; 


String.prototype.cliche = function() I 


A 一 止 E { 公 ; 五 
for (var i = 0; i < cliche.length; i++) { 我 们 定义 了 一 些 俗语 。 


Var index = this.indexOf (cliche[i]); 


if (index >= 0) { 
return true; 人 接 下 来 ， 我 们 使 用 String 的 方法 indexOf 
} 来 检查 字符 串 中 是 否 包 含 上 述 俗语 。 如 


} 果 包 含 ， 就 返回 true。 


roturn 上 Se 请 注意 ，this 指 的 是 方法 cliche 
}; 被 调用 的 字符 串 。 
为 测试 这 个 方法 ， 我 们 来 创建 一 些 句 子 ， 
下 面 来 编写 一 些 测试 这 个 方法 的 代码 2 其 中 的 两 个 包含 俗语 。 
var Sentences = ["I'l1l1 send my car around to pick You up.", 


"Let's touch base in the morning and see where we are", 


"We don't want to open the kimono, we JjJust want to inform them."]; 


每 个 句子 都 是 一 个 字符 串 ， 因 此 
for (var i = 0; i < sentences.length; I++) { 我 们 可 以 调用 其 方法 cliche 
var phrase = sentences[i]; < 


if (phrase.cliche()) { 


注意 到 创建 字符 串 时 ， 我 们 并 没有 结合 使 用 
console.log ("CLICHE ALERT: " + phrase),; 


new 和 构造 函数 5trind。 我 们 调用 方法 cliche 
时 ，Java5cript 会 在 幕后 将 每 个 字符 串 转 换 为 


道 字 符 串 包含 俗语 。 
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测试 俗语 检查 器 


将 前 面 的 代码 加 入 一 个 HTML 文 件 中 ， 然 后 打开 六 贤 如 并 加 载 这 


个 文件 。 
JavaScript 控 制 台 
效果 和 Sr , CLICHE AL ; 
teal nd and see a Let's touch base in the morning 
美国 的 企业 都 安装 这 些 代码 就 OO 
we 3 RI: We don't want to OPen the Ki 
Just want to inform them imono, 





a 
. 


给 string 等 内 置 对 象 添加 新 方法 时 ,和 干 万 要 小 心 。 
务必 确保 你 为 新 方法 选择 的 名 称 不 与 对 象 的 既 有 方 


小 心 法 发 生 冲突 。 链 接 其 他 代码 时 ， 一 定 要 清楚 这 些 代 
: 码 包 念 的 自 定义 扩展 (同样 ， 要 注意 可 能 存在 的 名 
光 冲 突 ) 。 最后， 有些 内 置 对 象 是 不 能 扩展 的 ， 如 Array。 


此 ， 着 手 给 内 置 对 象 添加 方法 前 ， 务 必要 做 足 功 读 。 





. 
58060 0 


纶 到 尔 和 请 与 8 > ] Poza ~ /SN 、 

0 
et ea al dR 
为 短语 的 情况 。) 将 这 个 方法 加 入 String.prototype 中 ， 再 对 其 进行 测试 
答案 见 本 章 末 尾 。 i 测试 。 
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一 切 肖 对 和 象 


JavasScript 大 统一 理论 


你 接受 了 学 习 一 门 全 新 语言 (也 可 能 是 你 接触 的 第 一 门 语言 ) 的 这 里 的 逻辑 是 这 样 的 : 大 约 有 59 亿 人 对 

任务 ， 祝 贺 你 成 功 地 完成 了 这 项 任务 。 到 这 里 ， 你 对 JavaScript | JavaScript 一 无 所 知 ， 对 JavaScript 有 所 

的 了 解 儿 乎 比 你 遇 到 的 每 个 人 都 深 了 解 的 人 只 是 极 小 一 部 分 。 这 意味 着 你 对 
ee Javascript 的 了 解 几乎 比 你 遇 到 的 每 个 人 

不 开玩笑 了 ， 如 果 你 阅读 到 了 这 里 ， 那 么 你 就 在 成 为 JavaScript 部 识 。 

专家 的 路 上 走 了 很 远 ， 唯 一 欠缺 的 是 设计 和 编写 Web 应 用 程序 

(也 可 以 说 是 任何 JavaScript 应 用 程序 ) 的 经 验 。 


使 肝 对 象 改善 生活 


学 习 JavaScript 这 样 的 复杂 主题 时 ， 很 容易 只 见 树木 ， 不 见 和 森林 。 但 对 
JavaScriptf 有 了 全 面 了 解 后 ， 再 回 过 头 来 研究 整个 森林 将 容易 得 多 。 


学 习 JavaScript 时 ， 你 每 次 都 只 学 习 其 一 个 方面 : 基本 类 型 (可 随时 像 
使 用 对 象 一 样 使 用 它们 ) 、 数 组 〈 它 们 有 点 像 对 象 ) 、 国 数 ( 真 古 奇 
怪 ， 它 们 像 对 象 一 样 包含 属性 和 方法 ) 、 构 造 国 数 〈 既 像 对 象 又 像 国 
数 ) ， 还 有 对 象 本 里 。 这 些 看 起 来 者 非常 复 森 。 


向 所 这 些 知识 后 ， 可 以 坐 下 来 放松 放松 深呼吸， 回味 “一 切 丝 对 象 * 


的 说 法 。 

一 切 畦 对象 ……: 一 切 
正如 你 看 到 的 ， 一切 丝 对 象 。 诚 然 ， 有 一 些 基本 类 型 ， 如 布尔 值 、 数 字 比 对 象 …… 一 切 锣 对 
和 字符 串 ， 但 只 要 需要 ， 你 随时 都 可 将 它们 视 为 对 象 。 还 有 一 些 内 置 
类 型 ， 如 Date Math 和 RegEx， 但 它们 也 都 是 对 象 。 即 便 数组 也 是 对 
象 。 正 如 你 看 到 的 ， 它 们 之 所 以 看 起 来 不 同 ， 只 古 因 为 JavaScript 提 供 
了 一 些 出 色 的 语法 糖 ， 让 我 们 能 够 更 轻松 地 创建 和 访问 对 象 。 当 然 ， 还 
有 对 象 本 身 ， 其 中 对 象 字 面 量 人 简单 易 用 ， 原 型 对 象 系统 则 提供 了 强大 的 
功能 。 


函数 呢 ?” 它 们 真 的 是 对 象 吗 ?” 我 们 来 验证 这 一 点 : 




















function meditate() { 
console.log("Everything is an object..."); 


} 


alert (meditate instanceof Object); 
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没 错 ， 函 数 确实 是 对 象 ， 但 现在 你 不 应 觉得 这 有 什么 奇怪 
的 。 毕 竞 ， 我 们 可 以 将 国 数 赋 给 变量 (就 像 将 对 象 赋 给 变量 ”一 一 一 
一 样 ) ， 将 其 作为 实 参 传递 给 函数 (就 像 对 象 一 样 ) ， 从 函 
数 返回 它们 (就 像 对 象 一 样 ) 。 我 们 还 发 现 ， 函 数 甚 至 包含 
属性 ， 如 下 所 示 : 








Dog .Const 上 zuctoL 


别 忘 了 ， 这 是 一 人 f 
A 人 | 、 
个 另 数 。 属性 。 没 错 ! 函数 也 是 对 象 。 


轴 浊 本 你 完全 可 以 给 函数 添加 新 属性 一 一 如 来 这 样 做 有 所 帮助 的 
证 。 最 后 ， 顺 便 说 一 句 ， 方 法 也 古 对 象 的 一 个 属性 ， 只 是 该 属性 
被 设 营 为 一 个 匿名 函数 表达 式 而 已 。 


整合 起 来 
J JavaScript 的 威力 和 灵活 性 虱 要 归功 于 可 以 将 函数 和 
对 家 作为 一 学 值 使 用 。 只 要 想 想 我 们 学 习 过 的 编程 概念 (构造 函数 、 
1 创建 可 重用 和 扩展 的 对 象 、 参 数 化 国 数 的 行为 、 等 等 ) ， 你 就 
会 发 现 ， 它 们 的 强大 威力 都 取决 于 你 对 高 级 对 象 和 国 数 的 认识 。 
好 了 ， 现 在 你 可 以 更 进 一 2 
在 你 可 以 更 进一步 了 。 请 务必 访问 http://wickedlysmart.com/ 


javascript， 阅 读 其 中 列 出 的 增补 内 
容 。 另 外 ， 你 的 下 一 项 任务 是 阅读 这 


继续 学 
继续 分 乌 本 书 。 请 接受 这 项 任务 。 


至 此 ， 你 掌握 了 所 有 的 基本 知识 ， 该 接着 往 下 走 了 。 
现在 ， 你 可 以 将 自己 具备 的 浏览 器 及 其 编程 接口 方 
面 的 经 验 付 诸 应 用 了 。 请 拿 起 《Head First HTMLS5 
Programming 中 文 版 》 一 书 ， 它 将 引领 你 学 会 在 应 
用 程序 中 添加 定位 、 画 布 绘画 、 本 地 存储 和 后 台 异 
步 化 (web worker) 等 功能 。 不 过 ， 放 下 本 书 前 ， 
务必 阅读 附录 ， 其 中 列 出 了 其 他 等 待 你 去 探索 的 重 
要 主题 。 











汶 是 一 个 变化 迅速 的 主题 ， 四 此 着 手 阅读 《Head 
请 务必 访问 


First HTML5 Programming 中 文 版 》 前， 
列 出 了 


http://wickedlysmart.com/javascript， 其 中 
最 新 的 推荐 读物 以 及 本 书 的 增补 和 修订 。 
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JavaScript 对 象 系统 使 用 原型 式 继承 。 


使 用 构造 函数 创建 对 象 实例 时 ， 实 例 包 
含 自 己 的 自 定 义 必 性， 还 有 构造 函数 中 
方法 的 副本 。 

给 构造 函数 的 原型 添加 属性 后 ， 使 用 这 
个 构造 函数 创建 的 实例 都 将 继承 这 些 属 
性 。 

通过 在 原型 中 定义 属性 ， 可 减少 对 象 包 
含 的 重复 代码 。 

加 该 属性 即 可 。 

构造 函数 有 默认 的 原型 ， 你 可 通过 构造 
冰 数 的 属性 prototype 来 访问 它 。 

可 将 你 自己 创建 的 对 象 赋 给 构造 函数 的 
属性 prototype。 

使 用 自 定义 的 原型 对 象 时 ， 务 必 将 原型 
的 属性 constructor 设 置 为 相应 的 构造 
函数 ， 以 保持 一 致 性 。 


给 原型 添加 属性 后 ， 继 承 该 原型 的 所 有 
实例 都 将 立即 继承 这 些 属 性 ， 即 便 是 以 
前 创建 的 实例 也 不 例外 。 


要 确定 属性 是 否 是 在 实例 中 定义 的 ， 可 
对 实例 调用 方法 nasOwnProperty。 


要 调用 函数 并 指定 函数 体 中 this 指向 的 
对 象 ， 可 调用 其 方法 call。 


上 归根结底， 所 有 原型 和 对 象 都 是 从 
Object 派生 而 来 的 。 


Object 包含 所 有 对 象 都 将 继承 的 属性 和 方 
法 ， 如 toString 和 和 hasOwnProperty。 


可 给 内 置 对 象 (如 Object 和 String) 
添加 属性 ， 也 可 重 写 它 们 的 既 有 属性 ， 
但 这 样 做 时 必须 小 心 ， 因 为 你 所 作 的 修 
改 可 能 市 来 深远 的 影响 。 

在 JavaScript 中 ,一 切 几 乎 丝 是 对 象 ， 包 
插 疯 数 、 数 组 和 砍 多 的 内 置 对 象 ， 还 有 
你 自己 创建 的 自 定 义 对 象 。 








4 
a 做 得 大 出 色 了 1! 
要 是 没有 你 ， 我 人 二 哇 ， 搞定 了 1 4 如 
哥们 ,于 得 不 错 ! et 我 们 根本 不 可 Er 好 极 了 ! 做 得 真 不 错 ! 你 现在 可 以 真 刀 真 枪 
! 地 编码 了 1 


m O D Sr BG D0 
o 2 . 


O oO D 6 

4 本 
ea 
| 











我 们 都 祝 贸 你 读 完 结束 3 了! 你 可 算 读 
完了 ! 





” 
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使 用 原型 


代 碚 冰箱 贴 管 案 


冰箱 上 有 一 个 对 象 图 ， 但 有 人 将 它 打 乱 了 ， 你 能 帮忙 将 它 组 装 起 来 吗 ? 在 这 
个 对 象 图 中 ， 有 两 个 机 器 人 原型 的 实例 : 其 中 一 个 1956 年 生产 的 Robby， 它 归 
Dr. Morbius 所 有 ， 拥 有 一 个 开关 ， 喝 咖啡 时 去 星巴克 ; 另 一 个 是 1962 年 生产 的 
Rosie， 它 归 George Jetson 所 有 ， 能 够 打扫 房间 。 需 要 指出 的 是 ， 有 些 冰箱 贴 可 能 
是 多 余 的 ， 祝 你 好 运 | 


案 如 下 。 





I 兴 





机 器 人 原型 


| 晶 | maker: "ObjectsRUs" 











ion speak() 
// 发 天 的 代码 






可 供 机 器 人 继承 - > 


的 原型 。 







speak!() 
makeCoffee() 
blinkLights() 






汉语 ， 
ffee() { 
// 却 别 的 代码 








/HA 



















Robot Robot 
name: "Robby" name: "Rosie" 
year: 1956 year: 1962 


owner: George Jetson 






owner: Dr. Morbius 
onOffSwitch: true 


/ | makeCoffee() 








cleanHouse!() 








// A 


# CLK( } 
// 去 蜂 巴 KB 
的 代码 = 
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练习 





答案 


还 记得 前 面包 含 机 器 人 Robby 和 Rosie 的 对 象 图 吗 ? 现在 就 来 实现 它 。 我 们 编写 了 构 
造 函 数 Robot 和 一 些 测试 代码 ， 而 你 需要 做 的 是 设置 机 器 人 原型 并 创建 这 两 个 机 器 


给 习 人 对 象 ， 再 通过 运行 对 这 些 代 码 进行 测试 。 答 案 如 下 。 
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function Robot(name, year, owner) { 上 这 是 基本 的 构造 函数 Robot。 


this.name = name:， 
this.year = year; 
this.owner = owner.; 


} a 


Robot .prototype.maker = "ObjectsRUs"; 


这 里 给 原型 添加 了 属性 maker。 


Robot .prototype.speak function() { 
alert ("Warning warning!!"); SS 还 添加 了 所 有 机 器 人 都 将 继承 
上 上 的 三 个 方法 。 
Robot .prototype.makeCoffee = function() { AL 
alert("Making coffee"); 
}; 
Robot .prototype.blinkLights = function() { 
alert ("Blink blink'").,; 
}; 上 -一 这 里 创建 机 器 人 Robby 和 
new Robot("Robby", 1956, "Dr. Morbius"); Rosie。 


Var robby 
Var rosie = new Robot("Rosie", 1962, "George Jetson'" ) ; 


3 一 一 。 一 PN 
robby .onOffSwitch = true; 汶 里 给 Robby 深 加 了 一 个 和 目 定义 属 


robby .makeCoffee = function() { 性 ， 还 添加 了 一 个 去 星巴克 喝 咖啡 


alert ("Fetching a coffee from Starbucks."),; 的 目 定义 方法 。 
}; 
rosie.cleanHouse = function() { 间 的 目 定义 
| < Rosie 也 有 丰 条 扫 柜 | as 二 就 得 
alert ("Cleaning! Spic and Span soon..."); 方法 。 (为 何 打 扫 房 间 的 事 束 位 
}3 嫌 机 器 人 做 ?) 


console.log(robby.name + " was made by " + robby.maker + 
" in " + robby.year + " and is owned by " + robby .owner); 
robby .makeCoffee(); 
robby .blinkLights (); 
console.log(rosie.name + " was made by " + rosie.maker + 


" in "+ rosie.year + " and is owned by " + rosie.owner); 
JavaScript 控 制 台 


rosie.cleanHouse () ; 这 是 我 们 得 到 的 输出 
、 Robby was made by Obj | 
Pi 、 一 一 Y JectsRUs in 1956 
( 陈 这 些 输出 外 ， 还 有 and is owned by Dr. Morbius 
一 一 > NN 一 三 一 
些 这 里 设 显 示 的 提示 Rosie was made by ObjectsRUs in 1962 
框 ) , and is owned by George Jetson 
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有 一 个 机 器 人 游戏 使 用 了 机 器 人 Robby 和 Rosie。 这 个 机 器 人 游戏 的 代码 如 下 。 在 
这 个 游戏 中 ， 玩 家 的 等 级 达到 42 后 ， 机 器 人 将 具备 一 项 新 功能 : 发 射 激 光束 。 请 
补 全 下 面 的 代码 ， 使 得 在 玩家 的 等 级 达到 42 后 ， 机 器 人 Robby 和 Rosie 都 能 发 射 激 






ml 


缘 


-次 
“CD E 光束 。 谷 案 如 下 。 


JavaScript 控 制 台 

Welcome to level 1 
Welcome to level 2 
WeLIcome to level 3 


function Game() { 
this.level = 0: 


WeLcome to Level 41 





Game .prototype.play = function() { Welcome to level 42 
0 Rosie is -| 
// 让 玩家 玩 游戏 的 代码 laser beams. 
this.level++; 
00D .log("'Welcome to level " + this. ee 才 这 是 我 们 得 到 的 输出 示 
this.unlock(); 每 次 玩 游戏 时 都 调用 unlock， 但 这 个 方法 的 作用 仅 当 例 ， 补 全 代码 后 ， 请 党 
} 等 级 达到 42 时 才 会 显现 出 来 。 试 玩 玩 这 个 游戏 ， 看 看 
是 哪个 机 器 人 先 发 射 激 
Game .prototype.unlock = function() { 光束 
if (this.level === 42) { 
Robot .prototype.deployLaser = function () { 
console.log(this.name + " is blasting you with laser beams."); 
} 级 这 到 
hh 吕 > 匀 42 后 ? 
文 个 游戏 的 诀窍 在 这 里 : 等 级 这 
} 这 意味 着 所 有 机 


在 原型 中 添加 一 个 新 方法 。 
器 人 都 将 继承 发 射 激 光 的 能 力 ! 
function Robot (name, year, owner) | 

this.name = name; 

this.year = year; 

this.owner = owner; 


Var game = new Game () ; 
Var robby = new Robot("Robby", 1956, "Dr. Morbius"); 
Var rosie = new Robot("Rosie", 1962, "George Jetson'" ) ; 


while (game.level < 42) { 
game .play (); 








robby .deployLaser (); 
rosie.deployLaser ();，; 
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练习 答案 


我 们 给 机 器 人 Robby 和 Rosie 添 加 了 一 项 新 功能 ， 现 在 它们 能 够 在 发 生 销 误 时 通过 
方法 reportError 进 行 报告 。 请 研究 下 面 的 代码 ， 特 别 要 注意 这 个 方法 是 从 什么 
地 方 获取 错误 信息 的 ， 以 及 这 个 万 法 是 否 是 在 机 器 人 原型 中 定义 的 。 


答案 如 下 。 





function Robot (name, year, owner) { 
this.name = name; 
this.year = year; 


this.owner = owner.; 


方法 reportError 只 是 使 用 了 
orrorMessage 的 值 ， 因 此 已 

Robot .prototype.maker = "ObjectsRUs'' ; er ， eee ge 

Robot .prototype.errorMessage = "All systems go."; 


Robot .prototype.reportError = function() I 


console.log(this.name + " says " + this.errorMessage); 
方法 spillWater 给 this. 


}; errorMessade 赋 值 。 这 将 


Robot .prototype.spillWater = function() { 在 这 个 方法 被 调用 的 机 器 
this.errorMessage = "I appear to have a short circuit!"; 人 对 象 中 重 写 原型 中 的 这 
} > 属 性 O 


var robby new Robot("Robby", 1956, "Dr. Morbius"); 


Var rosie = new Robot("Rosie", 1962, "George Jetson'" ) ; 


rosie.reportError ();，; 


robby .reportError (); 


robby.spillWater(); < 我 们 对 Robby 调 用 方 法 spillWater， ® 此 Robby 


安 而 型 
rosie.reportError (); 将 获得 目 己 的 属性 errorMessage， 即 重 写 康生 
robby .reportError () : 中 的 这 个 属性 。 
console .Log (obby .hasOwnProperty ("errorMessage")); true 
console.1log (rosie.hasOwnProperty ("errorMessage")); false 


但 我 们 从 未 对 Rosie 调 用 方法 spillWater， 
因此 它 继 承 了 原型 中 的 这 个 属性 。 


使 用 原型 


代 碚 冰箱 贴 管 案 


我 们 在 冰箱 上 又 贴 了 一 个 对 象 图 ， 但 也 被 人 弄 乱 了 。 你 能 帮忙 将 其 重新 组 合 起 来 吗 ? 与 
前 面 的 对 象 图 相 比 ， 这 个 对 象 图 新 增 了 一 些 太 空 机 器 人 ， 它 们 继承 了 机 器 人 的 属性 ， 重 
写 了 机 器 人 的 方法 speak， 还 新 增 了 方法 pilot() 和 属性 nomePlanet。 管 案 如 下 。 















tion Ese) 






























EE 机 器 人 原型 // 发 志 的 代码 
| | maker: "ObjectsRUs" 医 
1 继承 
speak() 机 器 人 原 型 继 
makeCoffee() 站 宇 太 | 癌 人 原型 。 在 
blinkLights() 入 ee 总 们 涿 加 了 
个 原生 涪 ， ， 
机 个 万 过 :speakpe 
/ 四 此 所 有 的 大 
都 阁 继 承 这 些 

























Robot CD .. \ 1 
和 大 太空 机 器 人 原型 ta 
name: Robby 3 py 
yeaf Robot 3 
| name "Rosie" 人 局 一 speak( 
year: 1962 aC pilot() 












~ owner: "George Jetson' 











NA 

\ 
jp 

Space Robot 

name: "Simon" 
year: 2009 
owner: "Carla Diana" 
homePlanet: "Earth" 


| Space Robot 


name: "C3PO" 

year: 1977 

owner: "L. Skywalker" 
homePlanet: "Tatooine" 










太空 机 器 人 实例 继承 太 
全 机 器 人 原型 ， 它们 继 
党 了 方法 speak 和 pilot 

在 每 个 实例 中 ， 我 们 
都 添加 了 与 定义 属性 

homePlanet 
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练习 答案 


轮 到 你 了。 在 机 器 人 行列 中 添加 一 些 太 空 机 器 人 。 这 些 太 空 机 器 人 能 做 到 机 器 人 能 做 
ay” 的 所 有 事 ， 但 它们 还 有 一 些 额外 的 行为 。 请 补 全 下 面 的 代码 ， 并 对 其 进行 测试 。 答 案 
给 羽 如 下 。 








function SPaceRobot (name, year, owner, homePlanet) { 


Coe nemo 构造 函数 SpaceRobot 与 构 造 函 数 Robot 类 似 ， 
this.year = year; 但 处 理 了 太空 机 器 人 实例 特有 的 额外 属性 
this.owner = owner; homePlanet。 


this.homePlanet = homePlanet.: 


_ 人 

二 有 8 型 继承 机 器 人 原型 ， 因 此 光一 

我 们 希望 太空 机 器 人 原本 

b b ea 机 器 人 实例 同 给 构造 范 数 SpaceRobot 乓 属性 prototype 
SpaceRobot .prototype = new Robot();，; 


SpaceRobot .prototype.speak = function() I 


alert(this.name + " Says Sir, If I may Venture an opinion..."); 


上 
人 在 太空 机 器 人 原型 中 


7 添加 了 这 两 个 方法 。 
SpaceRobot .prototype.pilot = function() I 


alert(this.name + " says Thrusters? Are they important?").,，; 


}; 


Var C3po = new SpaceRobot("C3PO", 1977, "Luke Skywalker", "Tatooine"); 
c3po.speak () ; 
c3po.pilot(),; 


console.log(c3po.name + " was made by " + c3po.maker); 


Var simon = new SpaceRobot ("Simon", 2009, "Carla Diana", "Earth"); 
simon .makeCoffee(); 


simon .blinkLights (); 
这 是 我 们 得 到 的 输 JavaScript 控 制 台 
出 (还 有 一 些 提示 
框 ， 这 里 没有 显示 


出 来 ) 。 


simon .speak () ; 


C3PO was made by ObjectsRUs 
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使 用 原型 


轮 到 你 了。 请 编写 方法 palindrome， 它 在 字符 捉 从 前 往 后 读 和 从 后 


往 前 读 一 样 时 返回 true。 将 这 个 方法 加 入 String.prototype 中 ， 青 








对 其 进行 测试 。 答 案 如 下 (只 考虑 了 字符 串 只 包含 一 个 单词 的 情况 ) 。 
String.prototype.palindrome = function() { 长 诬 
中 完 竺 ak < O 
var len = this.length-1; < 一 首先 ， 确定 字符 串 的 ~ oe 
for (var i = 0; i <= len; i++) { 有 一 接 下 来 ， ee ee 0 
、 mn 人 ;处 的 字符 ， 已 下 
if (this.charAt(i) !== this.charRAt(Len-I)) { 并 测试 位 于 案 引 i 了 4 ( 即 从 
a 否 与 位 于 索引 len - i 处 的 字符 《 印 
return false; krxaitb 应 空 答 ) 是 否 相 同 。 
} 人 如 果 它 们 不 同 ， 就 返回 。 后 往 前 数 的 相应 字符 ) 厦 


yy 衬 Re 
if (i === (len-i)) { false 因为 这 意味 着 这 
return true; 、、 字符 串 不 是 回 文 。 


0 果 到 达 字符 捉 正中 央 或 者 循环 已 结束 ， 就 返回 
, |- ， 四 为 这 意味 着 这 个 字符 串 是 回 文 。 


return true; 


}> 


这 是 一 些 用 于 测 

Var phrases = ["eve", "kayak", "mom", "wow", "Not a palindrome"]; 试 的 单词 
for (var i = 0; i < phrases.length; i++) { l 

我 们 迭代 数组 中 乓 每 个 

var phrase = phrases[i]; /i 单词 Mp 0 


If (phrase.palindrome()) { palindrome。 如 果 结 果 


console.log("'" + phrase + "' is a palindrome"); 为 true， 就 说 明 这 个 单 
} else { 词 是 回 文 。 
console.log("'" + phrase + "' Is NOT a palindrome"); 


在 这 里 ， 我 们 首先 将 字符 串 转换 为 一 个 3 

” 符 数 组 ， 其 中 包含 字符 事 中 的 所 有 部 ， 
接 下 来 ， 我 们 反 转 该 数组 中 字符 的 ， 二 

吾 阶 解 基 方案 序 ， 再 将 其 组 合成 一 个 字符 串 。 ah 

| 的 字符 串 与 新 字符 串 相同 ， 就 说 明 已 十 
回 文 。 注 意 ， 这 里 必须 使 用 valueOf， 因为 





: 米 

String.prototype.palindrome = function() { this 是 一 个 对 象 ， 而 不 像 r 那 样 是 基本 六 
六 的 阁 是 一 

var = this.split("") .reverse() .join(""); 型， 如果 不 使 用 value0f， 比较 的 将 征 一 ”1 


这 种 情况 下 ， 即 
return (r === this .valueOf () ) ， 字符 串 和 一 个 对 象 ， 而 在 这 种 情 只 下 
便 this 是 回 文 ， 它们 也 不 相等 。 
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如 果 和 这 是 本 书 末 尾 ， 嘟 沪 多 好 ! 

要 是 再 也 没有 了 要 点 、 填 字 游 
戏 、JavaScript 代 码 清 单 什 么 的， 那 该 
多 好 ! 但 这 也 许 不 过 是 白 晶 做梦 。 





祝 帝 你 终于 说 完 了! 


当然 ， 还 有 附录 。 

还 有 索引 。 

还 有 配套 网 站 等 。 

实际 上 ， 永 远 都 没有 解脱 的 时 候 。 
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附录 对 漏 内 容 


+ 天 涉足 的 十 大 主题 + 








我 们 介绍 了 大 量 的 基本 知识 ， ee 接近 尾声 。 我 们 会 想 
念 你 的 。 放手 让 你 去 独 闻 天 涯 前 ， 我 们 想 在 你 和 行 吉 中 再 准备 点 东西 ， 不 
然 会 不 放心 。 > 切 。 实 际 上 ， 
它 最 初 确 实 涵盖 了 你 需要 知道 但 本 书 前 面 未 介绍 的 一 切 JavaScript 编 程 知 
识 ， 但 字体 小 得 谁 都 看 不 清 。 因 此 ， 我 们 删除 了 其 中 的 大 部 分 内 容 ， 只 留 
下 最 重要 的 十 大 主题 。 


等 你 阅读 完 这 个 附录 后 ， 本 书 就 真 的 结束 了 。 不 过 别 忘 了 索引 。 (也 是 必 
读 的 ! ) 
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jQuery 简介 


#], jQuery 


jQuery 是 一 个 JavaScript 库 ， 旨 在 减少 和 人 简化 处 理 DOM 和 添加 视觉 效果 的 JavaScript 
代码 。jQuery 极 受 欢 迎 ， 被 大 家 广泛 使 用 ， 甚 插件 模型 使 其 是 可 扩展 的 。 
当前 ， 使 用 jQuery 能 做 的 事情 ， 使 用 JavaScript 也 都 能 做 (前面 说 过 ，jQuery 只 是 一 
个 JavaScript 库 ) ， 但 使 用 jQuery 确实 可 以 减少 需要 编写 的 代码 量 。 
jQuery 的 调和 本 说 明了 一 切 ， 但 如 果 你 对 它 一 无 所 知 ， 还 是 需要 花 些 时 间 才 能 熟悉 的 。 
这 里 只 介绍 可 使 用 jQuery 来 完成 的 几 项 工作 ， 如 果 你 觉得 它 不 错 ， 建 议 你 进行 更 次 
人 当前， 熟悉 jQuery 对 就 业 


还 记得 本 书 前 面 编写 的 window.onloaqd 国 数 吗 ? 它们 类 似 于 下 面 这 样 ee 编写 的 代码 





window.onload = function() { 
alert("the page is loaded!"),; 


} 
下 面 古 等 效 的 jQuery 代码 : 
$ (document) .ready (function() { 全 UF 准备 就 绪 后 ， 调 用 这 里 定义 的 函 
alert("the page is Loaded!") ; 和 
}); 


你 还 不 可 以 进 一 步 人 简化 : 站 党 简单 ， 但 正 加 你 看 到 的 ， 需 
$ (function() { ES i ee 习惯 。 不 用 担 
一 一 一 和 一 | 

alert("the page is loaded!"); 心 ， 你 很 快 就 会 对 它 了 加 指 学 


9 


从 DOM 和 获取 元 素 呢 ? 这 正 是 jQuery 的 闪光 点。 假设 网 页 中 有 一 个 id 为 buynow 
的 <a> 元 素 ， 而 你 想 给 它 指定 一 个 单 击 事件 处 理 程序 (本 书 前 面 多 次 这 样 做 
过 ) ， 可 以 像 下 面 这 样 做 : 





这 些 代 码 是 什么 意思 呢 ? 我 们 首先 指定 了 一 个 要 在 网 页 加 载 完 
上 用 Le] 


接 下 来 ， 我 们 获取 id 为 buynow 的 元 素 。 
(请 注意 ，jQuery 采 用 CSS 中 的 元 素 选 
$ ("#buynow") .click (function() { 择 语 法 。) 


$ (function() { 


alert("I want to buy now!"); 


}); | 对 获得 的 元 素 调 用 jQuery 方法 click， 以 指 
定 该 


一 


元 素 的 单 击 事件 处 理 程序 。 
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这 只 是 开始 ， 要 给 网 页 中 的 所 有 <a> 元 素 指 定单 击 处 理 程 序 ， 同 样 易 如 反 黎 : 


(funetion() A < 一 为 此 ， 我 们 需要 使 用 相应 的 标 
$ ("a") .click (function() 1{ 签名 。 
alert("I want to buy now!"); 
请 将 这 些 代码 与 实现 相同 功能 的 
) ) ; KR JavaScript 代 码 进 行 比较 。 
}).> 





使 用 jQuery， 还 可 以 完成 复杂 得 多 的 工作 : 获取 id 为 playlist 的 元 素 中 所 有 的 <li> 
元 素 。 
$ (function() { 
$("#playlist > 1i") .addClass ("favorite"),; 再 给 这 些 元 素 都 添加 类 favorite。 
}); Ny 


\ 这 里 提供 这 些 jQuery 代 码 只 是 想 让 你 热 热身 ， jQuery 实际 上 能 
够 让 你 完成 比 这 复杂 得 多 的 任务 。 


jQuery 还 能 够 让 你 对 界面 元 系 进 行 有 趣 的 变换 : 


$ (function() { 
$ ("#specialoffer") .click (function() { 
$ (this) .fadeOut (800, function() { 
$ (this) .fadeIn (400); 
}); 
}); 


这 些 代 码 让 id 为 specialoffer 的 元 素 以 不 同 
的 速度 渐 隐 再 渐 现 。 


正如 你 看 到 的 ， 使 用 jQuery 可 以 做 很 多 事情 。 这 里 设 有 提 及 的 是 ， 使 用 jQuery 还 可 以 与 
Web 服 务 通信 ， 另 外， 还 有 很 多 支持 jQuery 的 插件 。 如 果 你 对 jQuery 感 兴 趣 ， 了 最 佳 的 选择 
是 通过 训 览 器 访 问 http:/jquery.com/， 并 详细 研究 其 中 的 教程 和 文档 。 


作 _ 另外 ， 也 请 阅读 《Head First jQuery 中 文 版 》 
一 书 。 


遗漏 内 容 


ER 
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document 对 和 象 


#2, 更 多 地 使 用 00M 


本 书 前 面 提 及 了 使 用 DOM 可 做 的 一 些 事情 ， 但 需要 学 习 的 还 有 很 多 。 表 示 网 页 中 文档 的 对 象 
( 即 aocument) 以 及 各 种 元 素 对 象 都 包含 大 量 的 属性 和 方法 ， 你 可 使 用 它们 来 操作 网 页 以 及 
与 网 页 交互 。 




















你 已 经 知道 如 何 使 用 document.getElementById 和 document.getElementByTagName 
来 获取 网 页 中 的 元 素 ， 但 对 象 daocument 还 提供 了 下 述 用 于 获取 元 素 的 方法 : 





.个 
向 这 个 方法 传 入 类 名 ， 它 将 把 了 
NodeList， 其 中 包含 class 特 性 为 指 延 


document .getElementsByClassName 值 的 所 有 元 素 。 


这 个 方法 获取 name 特 性 为 指定 值 的 所 有 
document .getElementsByName 元 素 。 
这 个 方法 将 一 个 选择 器 (类似 于 C99 选择 器 ) 
document .querySelector < 作为 参数 ， 并 返 回 匹配 的 第 一 个 元 素 。 


L 一 这 个 方法 也 将 一 个 选择 器 作为 参数 ， 但 返回 一 个 


document .querySelectorAll 二 
Nodelist， 其 中 包含 与 选择 器 匹配 的 所 有 元 素 。 


下 面 深 示 了 如 何 使 用 document.querySelector 来 获取 一 个 列表 项 元 素 。 这 个 元 素 
的 clLlass 特 性 为 song， 骸 和 套 在 一 个 i 为 pLavyList 的 <ulL> 元 素 中 : 


var li = document.querySelector("#playlist .song"); 


这 个 选择 器 的 含义 是 ， 先 查找 id 为 注意 到 这 个 选择 器 很 像 C9 选 
playlist 的 元 素 ， 再 在 其 中 查找 第 一 择 器 。 


个 特性 class 为 song 的 元 素 。 


如 打 要 使 用 代码 在 网 页 中 添加 新 元 素 ， 该 如 何 办 呢 ? 可 结合 使 用 对 象 document 的 方法 
以 及 元 紊 对 象 的 方法 ， 如 下 所 示 : 





AL 首先 ， 创建 一 个 新 的 <li>7 : 
Var newItem = document.createElement ("1i"); Us ea ee | 


newItem.innerHTML = "Your Random Heart"; 个 字符 串 。 


Var ul = document .getElementById ("playlist").,; 然后 ， 获 取 要 将 该 Ili» 元素 作 为 
3 久 <li> 元 示 作 大 








ul .appendChild (newItem) ; 和 一 子 元 素 加 入 其 中 的 <ul> 元 素 ， 再 
所- 一 将 cli> 元 素 附 加 到 这 个 <ul> 元 素 
的 末尾 。 
可 使 用 JavaScript 对 DOM 执 行 的 操作 还 有 很 多 。 有 关 这 方面 的 深入 介绍 ， So 


请 参阅 《Head First HTMLS5 Programming 中 文 版 》。 
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#2. 对 象 window 


你 听 说 过 DOM， 但 应 该 知道 还 有 BOM， 即 浏览 器 对 象 模型 (browser object model) 。 这 其 实 并 
韭 官方 标准 ， 但 所 有 浏览 絮 都 通过 于 对 家 windovw 来 文 持 已。 A www 你 顺 
便 熟悉 了 对 象 wvindow。 你 肯定 还 记得 ， 可 将 一 个 事件 处 理 程序 赋 给 这 个 属性 ， 以 便 在 网 页 加 载 
毕 后 调用 它 。 

使 用 方法 alert 和 Prompt 时 ， 也 涉及 了 对 象 window， 但 这 一 点 不 那么 明显 。 不 明显 的 原因 
是 ，window 是 一 个 充当 全 局 命名 空间 的 对 象 。 当 你 声明 全 局 变量 或 定义 全 局 函数 时 ， 它 将 被 作 
为 一 个 属性 存储 在 对 和 象 window 中 。 因 此 ， 每 次 调用 alert 时 ， 其 实 也 都 可 调用 window.alert， 
因为 它们 是 等 效 的 。 


另外 ， 使 用 对 象 aocument (如 使 用 document.getElementById 从 DOM 中 获取 元 素 ) 时 ， 也 
涉及 了 对 象 window， 只 是 你 没有 意识 到 而 已 。 对 象 document 是 对 象 window 的 一 个 属性 ， 
此 可 将 document.getElementById 改 写 为 window.document.getElementById。 但 与 调用 
alert 了 时 一 样 ， 可 以 不 这 样 做 ， 因 为 window 是 全 局 对 象 。 我 们 使 用 属性 和 方法 时 ， 如 果 没 有 指 
定 它 所 属 的 对 象 ， 默 认 指 的 都 是 winqdow。 


除了 充当 全 局 对 象 ， 提 供 属性 onloagd 以 及 方法 alert 和 prompt 外 , 对 象 vindow 还 提供 了 其 他 
隶 有 六 蜗 如 的 有 趣 属性 和 方法 。 例 如 ， 大 家 第 第 获取 便 贤 带 窗 口 的 宽度 和 高 度 ， 以 根据 六 览 絮 的 
尺寸 来 定制 网 页 。 要 访问 这 些 值 ， 可 以 像 下 面 这 样 做 : 


. . . 使 用 这 些 属性 来 获取 浏览 器 窗口 的 宽度 和 高 度 (单位 
window.innerWidth LA 为 像素 ) 。 请 注意 ， 老 式 浏览 器 可 能 没有 暴露 这 些 


window.innerHeight 属性 


























有 关 对 象 window 的 详细 信息 ， 请 参阅 W3C 文 档 (http://www.w3.ore/html/wg/drafts/html/CR/ 
browsers.html#the-window-object) 。 下 面 是 对 象 vindow 中 几 个 第 用 的 方法 和 属性 . 


window.close() 2 一 一 这 个 方法 关闭 浏览 器 窗口 。 


window .setTimeout () pa 这 些 方法 你 都 很 熟悉 》 它们 是 对 象 


寺 
window.setInterval () window 近 供 的 。 


window .print() RR 使 用 打印 机 打印 网 页 o 
个 方法 类 似 于 prompt， 但 给 用 户 提供 了 选择 ， 


window.confirm() 你 能 够 单 击 OK 或 Cancel 控 钮 。 
window.history 人 一 这 个 属性 是 一 个 对 象 ， 包 含 浏览 历史 记录 。 


个 属性 是 当前 所 显示 网 页 的 URL。 你 也 可 设置 这 个 属性 ， 
WiIndow. Location ee 加 载 指定 的 新 网 页 ， 
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arguments 对 象 


#4., arguments 


在 每 个 国 数 中 ， 都 有 一 个 名 为 arguments 的 对 象 可 供 使 用 。 形 参 列 表 中 没有 这 个 对 象 ， 
但 每 当 国 数 被 调用 时 ， 你 都 可 以 通过 变量 arguments 来 使 用 它 。 


对 家 arguments 包 合 传 递 给 国 数 的 所 有 实 参 ， 可 像 使 用 数组 那样 使 用 它 。 通 过 使 用 
arguments， 你 可 创建 这 样 的 冰 数 : 接受 数量 可 变 的 实 参 ， 并 根据 传人 的 实 参 数量 执 
行 不 同 的 操作 。 下 面 的 代码 演示 了 如 何 使 用 argument s: 


在 这 个 函数 中 ， 没 有 定义 任何 形 参 ， 只 使 用 了 对 象 
arguments.。 
{ 与 数组 一 样 ，arguments 也 包含 属性 length。 


function printArgs() { 
for (var i = 0; i < arguments.length; i++) { 


console.log(arguments [i]); ss 
} 


Im 人生 | 人 
可 使 用 数组 表示 法 来 访问 JavaScript 摊 制 台 
每 个 实 参 。 


printArgs ("one", 2, 1+2, "four"); 





调用 printArgs， 并 同 它 传递 4 个 实 人 参 


虽然 arguments 看 起 来 像 数 组 ,但 它 其 实 并 不 是 数组 ， 而 是 一 个 对 象 。 它 包 伟 属性 
Length， 你 可 返 代 它 并 使 用 方 括号 表示 法 来 访问 其 中 的 实 参 ， 但 它 与 数组 的 类 似 性 仅 
此 而 已 。 另 外 ， 注 意 你 可 以 在 同一 个 国 数 中 同时 使 用 形 参 和 对 象 arguments。 下 面 再 
来 看 一 段 代码 ， 看 看 如 何 编写 实 参 数量 可 变 的 国 数 : 





可 像 通 常 那样 定义 形 参 。 在 这 里 ， 我 们 使 用 了 一 个 形 参 
function emote (kind) { 人 来 指定 该 如 何 使 用 这 个 函数 。 


if (kind === "SILence") { 
console.log("Player sits in silence"); JavaScript 控 制 合 
Se Player sits in silence 
console.log("Player says: '" + arguments[1] + "'"); player says: 'Stand pack! ' 
} 
} 如 果 第 一 个 实 参 为 silence， 就 不 需要 其 他 的 实 参 。 





如 果 第 一 个 实 参 为 says， 就 使 用 arguments[1] 来 
获取 第 二 个 实 参 。 
emote ("SILence" ) ; 第 2 


emote ("says", "Stand back!'"); 
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#5, 处 理 有 异常 


JavaScript 是 一 种 非常 宽容 的 语言 ， 但 还 是 会 时 不 时 地 出 问题 一 一 严重 到 训 览 
大 无 法 继续 执行 代码 。 在 这 种 情况 下 ， 网 页 将 停止 工作 。 如 末 你 此 时 奋 看 控 
制 台 ， 很 可 能 会 看 到 错误 消 上 号。 来 看 一 个 将 导致 错误 的 代码 示例 。 首 先 ， 创 
建 一 个 只 包含 一 个 元 素 的 简单 HTML 页 面 : 








<div id="message"></div> 


接 下 来 ， 添 加 如 下 JavaScript 代 码 : 


、 口 A 
window.onload = function() { 人 一 这 些 代码 中 存在 一 个 错误 ， 你 看 出 来 
Var message = document .getElementById("messge"); 3 了 03? 
message.innerHTIML = "Here's the message!"; 


}; 
在 浏 览 絮 中 加 载 这 个 网 页 ， 确 保 打 开 了 控制 台 。 你 将 看 到 一 条 错误 消息 。 
你 能 看 出 来 问题 出 在 什么 地 方 吗 ?<aiv> 元 素 的 i 拼写 不 正确 ， 导 致 代 友 党 [Jovan 
试 获 取 <div> 元 素 时 以 失败 告终 。 因 此 变量 message 为 null1， 进 而 无 法 访 
问 这 个 变量 的 属性 innerHTML。 





Uncaught TypeError: Cannot set 
property 'innerHTML' of null 
像 这 样 导致 代码 无 法 继续 执行 的 错误 被 称 为 异 症 。JavaScript 提 供 了 一 种 名 
为 try/catch 的 机 制 ， 让 你 能 够 发 现 并 捕获 异 浓 。 这 里 的 基本 理念 是 ， 如 
有 果 能 够 捕获 异常 ， 就 可 避免 代码 停止 执行 ， 从 而 采取 补救 措施 (尝试 执行 其 他 操作 ， 癌 
用 户 提供 不 同 的 体验 等 ) 。 
try/catch 
try/catch 的 用 法 如 下 : 将 要 尝试 执行 的 代码 放 在 一 个 try 块 中 ， 再 编写 一 个 catch 块 ， 
其 中 包含 try 块 中 的 代码 出 现 错误 时 将 执行 的 代码 。 在 关键 字 catch 后 面 ， 紧 跟着 用 括号 
括 起 的 变量 名 (这 个 变量 很 像 函 数 形 参 ) 。 只 要 出 现 回 题 ， 就 将 捕获 到 异常 ， 并 将 一 个 
与 异常 相关 的 值 (通常 是 一 个 Error 对 和 象 ) 赋 给 这 个 变量 。 下 面 演示 了 try/catch 语 名 
的 用 法 : 


window.onload = Eunction() { 7 














将 需 松 执 行 的 代码 移 到 try 块 中 。 


try 1 


Var message = document .getElementById("messge"); 


尝试 将 message ‘其 值 为 null) 的 

AN ~ es Ds) 
属性 innerHTML 设 置 为 个 字符 串 。 
message.innerHTIML = "Here's the message!"; 


} catch (error) { 


CE “如果 try 块 中 的 代码 引发 了 异常 ， 将 执行 这 行 代 


console.log("Error! ”+ error.message); 码 : 在 控制 台 显示 对 象 error 的 属性 messade 
} ) 接 下 来 ， 将 接着 执行 try/catch 语 句 后 面 的 代码 。 
}; 在 这 里 ， 可 根据 error 的 值 采 取 


更 明知 的 措施 。 


你 现在 的 位 置 ， 629 


使 用 addEventListener 


#0, 使 用 addEventListener 添 加 事件 处 理 程序 


在 本 书 中 ， 我们 使 用 对 象 属性 来 给 事件 指定 处 理 程序 。 例 如 ， 要 处 理 加 载 事 件 时 ， 我 们 将 一 个 
事件 处 理 程序 赋 给 属性 window.onload; 要 处 理 按钮 单 击 事件 时 ， 我 们 将 一 个 事件 处 理 程序 赋 
给 按钮 的 属性 onclick。 


这 种 指定 事件 处 理 程 序 的 方式 很 方便 ， 但 在 有 些 情况 下 ， 可 能 需要 更 通用 的 事件 处 理 程 序 指定 
方式 。 例 如 ， 如 果 要 给 一 个 事件 指定 多 个 处 理 程序 ， 就 不 能 使 用 属性 (如 onload) 来 完成 这 种 
任务 ， 而 必须 使 用 方法 addEventListener: 




















对 对 象 window 调 用 方法 
过 、 一 2 sr 字 符 
addEventListener， 以 注册 向 它 传递 了 三 个 参数 : 用 了 指向 事件 处 理 程序 的 引 用 


一 个 加 载 事件 处 理 程序 。 串 “load 表示 的 事件 名 称 …… 
window.addEventListener ("load", init, false);: 还 有 一 个 标志 ， 它 指出 我 们 是 否 要 i 
function init() f 事件 向 上 传递 (这 将 在 稍 后 解释 ) ， 

// 网 页 加 载 完毕 
} 因此 加 载 事 件 发 生 时 ， 


将 调用 函数 init。 


你 可 以 再 指定 一 个 加 载 事 件 处 理 程 序 。 为 此 ， 可 再 次 调用 addEventListener， 并 将 第 二 个 实 
参 设置 为 指向 男 一 个 事件 处 理 程序 的 引用 。 在 你 想 将 初始 化 代码 放 在 两 个 函数 中 时 ， 这 提供 了 极 
大 的 方便 ;但 别 忘 了 ， 你 无 法 知道 先 调用 哪个 处 理 程 序 ， 因 此 设计 代码 时 务必 芳 虑 这 一 点 。 
addEventListener 有 的 第 三 个 实 参 指定 是 否 将 事件 同上 传递 给 父 元 素 。 就 加 载 事 件 而 言 ， 这 无 
关 紧 要 ， 因 为 对 象 window 位 于 最 顶层; 但 如 果 你 在 <div> 元 素 中 骸 套 一 个 <span> 元 素 ， 并 和 希 
望 用 户 单 击 <span> 元 素 时 , <div> 元 素 也 将 收 到 这 个 事件 ， 就 可 将 这 个 实 参 设置 为 true (而 不 
是 false) 。 




















完全 可 以 在 使 用 事件 属性 (如 onloadq) 的 同时 使 用 addqEventListener， 这 不 会 有 任何 问题 。 
另外 ， 对 于 使 用 addEventListener 添 加 的 事件 处 理 程序 ， 还 可 使 用 removeEventListener 
来 删除 它 ， 如 下 所 示 : 


使 用 对 象 window 的 属 性 onload 指 定 了 一 个 加 


2 一 人 烧 事件 处 理 程序 。 


window.onload = function() { 


var div = document .getElementById ("clickme"); 4 一 并 使 用 addEventListener 给 <div> 元 素 
S 口 
div.addEventListener ("click"，handleClick，false); ”指定 了 一 个 单 击 事件 处 理 程序 。 


}; 
function handleClick(e) { 用 户 单 击 <div> 元 素 时 ， 我 们 使 用 


V9 一 removeEventListener 删 除 已 指定 的 
alert("You clicked on " + target.id); 单 击 事件 处 理 程序 。 


target.removeEventListener("click", handleClick, false),; 


IE8 和 和 更 早 版 本 中 的 事件 处 理 


本 书 处 理 过 多 种 不 同 的 事件 : 鼠标 单 击 事件 、 网 页 加 载 事 件 、 按 键 事件 等 。 但 愿 你 使 用 的 
是 现代 神 览 姻 ， 让 这 些 代 码 能 够 正常 地 运行 。 然 而 ， 如 果 你 要 编写 处 理事 件 的 网 页 (哪个 
网 页 不 需要 这 样 做 呢 ? ) ， 并 担心 有 些 用 户 使 用 的 是 Internet Explorer (IE) 8 或 更 早 的 版 
本 ， 就 需要 知道 一 个 与 事件 处 理 相 关 的 问题 。 


可 惜 在 下 9 之 前 ， 卫 处 理事 件 的 方式 不 同 于 其 他 浏览 器 。 无 论 用 户 使 用 的 是 哪 种 浏览 绒 ， 
你 都 可 使 用 onclick 和 on1load 等 属性 来 指定 事件 处 理 程序 ， 但 较 旧 的 下 浏览 各 处 理事 件 
对 象 的 方式 不 同 。 男 外 ， 在 IE9 之 前 ，IE 都 不 支持 标准 化 方法 addEventListener。 你 必 
须 对 下 面 的 问题 心中 有 数 。 














DIE8 和 更 早 的 版 本 确实 支持 大 多 数 可 用 于 指定 事件 处 理 程序 的 “on” 属 性 。 
口 IE8 和 更 早 的 版 本 使 用 方法 attachEvent 而 不 是 addEventListener。 


口 事件 触发 导致 事件 处 理 程 序 被 调用 时 ，IE8 和 更 早 的 版 本 将 事件 对 象 存 储 在 对 象 
window 中 ， 而 不 将 其 传递 给 事件 处 理 程序 。 

















因此 ， 要 确保 代码 在 包括 IE8 和 更 早 版 本 的 所 有 浏览 如 中 都 能 正确 地 运行 ， 可 像 下 面 这 样 
处 理 这 些 差 异 : IE8 支 持 用 于 指定 加 载 事件 处 理 程序 的 


4 一 一 一 一 一 属性 onload，@ 此 这 行 代码 不 会 全 


问题 。 
Var div = document .getElementById ("clickme").; t0 果 你 使 用 方法 addEventListener 
If (div.addEventListener) { 站 来 添加 事件 处 理 程序 ? 就 必须 检查 
浏览 器 是 否 支持 它 。 
Qiv.addEventLiLstenez ("CcJLILck" ，handleC1lLLIck，falLlse) : 


} else if (div.attachEvent) { < 如果 浏览 器 不 支持 它 
div.attachEvent ("onclick", handleClick) 


window.onload = function() { 


} 亡 沟 求 使 用 “onclick” 来 表示 单 击 事件 。 
i A/ 
function handleClick(e) { 如 果 向 事件 处 理 程序 传递 了 事件 对 象 ， 就 说 明 用 成 使 用 
var evt = e || window.event: 的 浏览 器 为 上 E9 以 上 版 本 或 其 他 浏览 器 。 和 否则 ， 你 就 必 


和 须 从 window 中 获取 该 事件 对 象 。 


var target; 


if (evt.target) { “ 
target = evt.target,; 
9 如 果 事件 对 象 是 向 事件 处 理 程序 传递 的 ， 其 属性 target 


} else { 将 为 触发 事件 的 元 素 。 如 果 用 户 使 用 的 是 IE8 或 更 早 的 
target = evt.srcElement; 所 一 版 本 包含 该 元 素 的 属性 将 为 srcElement 


} 
alert("You clicked on " + 七 aget 上 .Id) ; 














ee 歌 应 转 而 使 用 方法 attachEvent 
总 ， twattachEvent 不 接受 第 3 个 参数 ， 万 外 ， 
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用 正则 表达 式 匹 配 字符 串 


#7 正则 表达 式 


本 书 前 面 提 到 过 RegExp 对 象 。RegExp 表 示 正 则 表达 式 ， 是 一 种 描述 文本 模式 的 语法 。 
例如 ， 通 过 使 用 正则 表达 式 ， 可 编写 匹配 以 下 文本 的 表达 式 : 以 t 打 头 、 以 e 结 束 ， 且 至 
少 包 含 一 个 a 和 至 多 两 个 u。 

正则 表达 式 可 能 很 复杂 。 事 实 上 ， 刚 见 到 正则 表达 式 时 ， 它 们 可 能 看 起 来 就 像 天 书 。 不 
过 ， 你 很 快 就 会 熟悉 简单 的 正则 表达 式 。 如 有 果 你 对 正则 表达 式 感 兴 趣 ， 请 参阅 这 方面 
的 优秀 资料 。 














构造 号 数 RegExp 
下 面 来 介绍 两 个 正则 表达 式 。 要 创建 正则 表达 式 ， 可 调用 构造 国 数 RegExpP， 并 
传人 放 在 两 个 斜 杠 之 间 的 搜索 模式 ， 如 下 所 示 ， 
交 造 范 数 RegExp 的 实 傅 为 
搜索 模式 。 如 何 解读 这 网 


个 搜索 模式 呢 ? 
var areaCode = new RegExp (/[0-9] {3}/); / 


六 说 锻 让 
var phoneNumber = new RegExp(/^\d{3}-?\d{4}$/); 倪 这 





还 记得 第 7 章 的 座 椅 争 夺 战 吗 ? Amy 就 是 
每 僧 这 个 正则 表达 式 获胜 的 。 








要 理解 正则 表达 式 ， 关 键 在 于 学 会 如 何 解 读 搜 索 模 式 。 搜 索 模 式 古 正则 
表达 式 中 最 复杂 的 部 分 ,下面 将 详细 解读 这 两 个 示例 ， 其 他 的 就 留 给 你 








自己 去 探索 吧 。 
的 意思 是 与 0~96 数字 都 这 部 分 的 意思 是 与 三 个 字符 匹配 。 换 
这 部 分 的 意思 是 与 0~9 的 任何 句子 和 
匹配 。 门 用 于 指定 与 什么 范围 内 的 字 租 数字 匹配 侨民 与 三 个 D~9 的 
或 数字 匹配 。 
/ 


一 全 -一人 一 


一 个 /标示 正则 表达 式 的 结 
/标示 正则 表达 式 的 / [ 0 O ] { 3 } / /标示 正则 表达 式 昌 


开头 位 置 。 < 束 位 置 。 


一 一 


这 个 正则 表达 式 与 由 三 个 数字 组 成 的 字符 中。 2 0 1 1 
(如 “201” 或 “5035”) 匹配 。 


632 附录 


^ 表 示 从 字 0 
符 串 的 开关 {3} 表 示 堆 ” 杯 或 一 个 再 次 匹配 {4} 表示 
渤 行 匹配 。 dl 表示 与 一 “匹配 三 位 人 ne 任何 一 位 ”要 匹配 四 与 字符 串 

Bo 位 数字 匹配 。 2 数字 。 位 数字 。 末尾 匹配 。 


/标示 正则 表 hs \al3} -3\at4a}s/. 


/标示 正则 表 


达 式 的 开头 Si 
位 置 。 和 -0 
站 。 


soasx 955-121< 


与 七 位 的 电话 号 
码 匹 配 ， 其 中 第 5 要 
位 和 第 4 位 之 间 可 


> "5551212" 


可 以 没有 。 


使 用 RegExP 对 象 
要 使 用 正则 表达 式 ， 首 先 必 须 有 一 个 要 搜索 的 字符 串 : 


var amyHome = "555-1212"; 


判断 这 个 字符 囊 是 否 与 正则 表达 式 匹配 。 为 此 ， 可 对 
个 字符 串 调 用 方法 match， 并 将 正则 表达 式 对 象 作为 实 参 传 








ory 

a 和 result 的 值 为 [“555-1212 ]， 因为 
作 指 和 定 的 正则 表达 式 与 变 量 anyHome 存 

Cr 储 的 整个 字符 串 匹 配 。 


结果 为 一 个 数组 ， 其 中 包含 与 正则 表达 式 匹 配 的 子 串 。 如 果 结 
果 为 nul1l1， 就 说 明 字 符 串 的 任何 部 分 都 不 与 正则 表达 式 匹配 。 


result2 的 值 为 null， 因 为 变 量 invalid 存 储 的 字 


Var result2 = invalid.match (PhoneNumbeLr) ; 索 模 式 匹配 。 


创建 正则 表达 式 后 ， 就 可 以 不 断 地 使 用 它 来 匹配 字符 串 ， 想 
配 多 少 个 就 能 匹配 多 少 个 。 





你 现 ; 在 的 位 置 


ER 


谷 
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递归 函数 


#8, 递归 

给 函数 指定 名 称 后 ， 就 可 以 做 一 件 有 趣 的 事情 : 在 这 个 函数 中 调用 它 自己 。 我 们 称 之 
为 递归 或 递归 函数 调用 。 

为 何 需 要 这 样 做 昵 ? 因为 有 些 问 题 就 是 递归 性 的 。 下 面 是 一 个 来 自 数 学 领域 的 例子 : 
计算 裴 波 那 契 数 列 的 算法 。 斐 波 那 契 数 列 是 这 样 的 : 

0、1、1、2、3、5、8、 13、21、34、55、89、144.………. 

为 计算 斐 波 纳 契 数列 ， 首 先 做 如 下 两 个 假设 : 


Fibonacci(0) = 1 








Fibonacci(1) = 1 
然后 ， 对 于 裴 波 那 契 数列 中 的 任何 数字 ， 都 通过 将 前 两 个 数字 相 加 来 得 到 它 : 


Fibonacci(2) = Fibonacci(1) + Fibonacci(0) =2 





Fibonacci(3) = Fibonacci(2) + Fibonacci(1) =3 

Fibonacci(4) = Fibonacci(3) + Fibonacci(2) =5 

依 此 类 推 。 计 算 斐 波 那 契 数 的 算法 天 然 具 有 递归 性 ， 因 为 你 将 前 两 个 斐 波 那 契 数 相 加 
来 得 到 下 一 个 斐 波 那 契 数 。 

我 们 可 创建 一 个 这 样 的 递归 国 数 来 计算 裴 波 那 提 数 : 要 计算 Fibonacci(n)， 我 们 两 次 调 
用 函数 fijbonacci， 并 分 别 将 n 一 1 和 n 一 2 作为 实 参 ， 再 将 这 两 次 调用 函数 fibponacci 
的 结 来 相 加 。 

下 面 编 写 这 个 函数 的 代码 。 首 先 ， 处 理 实 参 为 0 或 1 的 情形 : 


编写 一 个 函数 ， 它 将 n 作 为 参数 。 该 参数 表 
辽 东芝 计算 妆 波 那 契 数列 中 的 第 几 个 数字 。 


function fibonacci(n) { 


if (n === 0) return 1; 我 们 知道 ， 如 果 n 为 O 或 1， 我 们 都 应 返回 1。 这 
. 八 被 称 为 函数 的 基线 条 件 (base case) ， 因 为 满 
if (n === 1) return 1; 《一 足 这 种 条 件 后 ， 就 无 需 再 递归 调用 了 。 








这 些 被 称 为 基线 条 件 ， 即 无 需 根 据 以 前 的 翡 波 那 扫 数 来 计算 它们 ; 通常 最 好 先 将 实 
现 它 们 的 代码 编写 出 来 。 接 下 来 ， 你 束 可 以 这 样 想 : 要 计算 Fibonacci(n)， 只 需 将 
Fibonacci(n 一 1) 和 Fibonacci(n 一 2) 相 加 ， 并 返回 结果 即 可 。 


下 面 来 编写 这 样 的 代码 : 


function fibonacci(n) { 


If (n === 0) return 1; < ~、 


if (n === 1) return 1; 如 果 n 不 为 O 或 1， 只 需 将 Fibonacci(n 一 1) 和 
return (fibonacci(n-1) + fibonacci (n-2)); Fibonacci(n 一 2) 相 加 ， 并 返回 结果 即 可 。 





如 果 你 从 未 见 过 递归 ， 这 些 代 码 看 起 来 有 点 不 可 思议 ,但 它们 确实 能 够 计算 出 韭 波 
那 契 数 。 下 面 整理 了 这 些 代 码 ， 并 对 其 进行 测试 : 
Se 与 前 面 的 代码 等 效 ， 只 是 更 简洁 。 
function fibonacci(n) { 
1f (n 二 二 二 | | n 三 三 三 1) { 


return 1. 


} else { 


return (fibonacci(n-1) + fibonacci (n-2)); 


} a 这 是 一 些 测试 代码 。 


for (var i1 = 0; i < 10; i++) { 


console.log("The fibonacci of " +i+" is "+ fibonacci(i)); 


JavaScript 控 制 台 


The fibonacci is 
The fibonacci of is 
The fibonacci of is 

0 The fibonacci of is 
。 The fibonacci of is 

一 定 要 有 基线 条 件 。 0 
is 
is 
is 





The fibonacci 


The fibonacci 


如 尺 递 归 代码 满足 不 了 导致 计算 结束 的 基线 条 件 ， : The Sibonacci 
已 将 不 断 地 执行 下 去 ， 就 像 无 限 循环 。 换 句 话说 ， 0 
国 数 将 不 断 地 调用 自己 ， 进 而 不 断 地 消耗 资源 ， 直 
到 浏览 咒 难 以 应 付 。 因 此 ， 如 果 包 含 递归 代码 的 网 
页 没有 响应 ， 请 核实 这 些 代码 最 终 能 满足 基线 条 件 。 


oo~awm 必 mwN 





人 
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#9, JSON 


JavaScript 不 仅 古 一 种 Web 编 程 语言 ， 还 正在 逐渐 成 为 一 种 肖 用 的 对 象 存储 和 传输 格式 。JSON 古 
一 个 缩 上 略语， 表示 JavaScript Object Notation。 这 种 格式 让 你 能 够 以 字符 串 的 方式 表示 JavaScript 对 
象 ， 以 便 对 其 进行 存储 和 传输 ; 








一 个 JSON 字 符 串 。 
Var fidoString = '{ "name": "Fido", "breed": "Mixed", "weight": 38 }'，; 


请 注意 ， 信用 了 单 引 名 来 括 起 谤 个 J60N 字 特惠 。 人 ee 






光 们 必须 这 样 做 ， 因 为 这 个 字符 串 包含 双 引号 。 如 地 是 不 是 览 得 。。 很 像 本 蔬 前 
己 来 括 起 它 将 让 JavaScript 感 到 迷人 瓯 。 单 引 "a 这 个 他 位 
使 用 双 引 号 来 -PD 了 <A rc 4 其 中 包含 的 对 象 fdo。 
号 让 Java5cript 知 首 这 是 一 个 很 长 的 字符 昌 ”| 面 创建 的 入“ 
其 他 字符 串 。 
JSON 的 优点 之 一 是 ， 它 让 我 们 能 够 将 类 似 于 上 面 的 字符 串 转 换 为 对 象 。 为 此 ， 需 要 使 用 
JavaScript 对 象 JSON 提 供 的 两 个 方法 : JSON.parse 和 JSON.stringify,， 下面 使 用 方法 parse 来 
分 析 前 面 的 fidqostring， 并 将 其 转换 为 真正 的 小 狗 对 象 (总 之 是 JavaScript 对 象 ) : 请 往 意 ， 这 里 用 到 了 
JGON 对 象 。J5ON 际 乞 
-种 字符 串 格式 的 名 称 ， 
var fido = JSON.Parse (fidoString) ; 由 是 一 种 JavaScript 允 
name : "Fido" 
|! ame : 象 。 






breed: "Mixed 


个 


调用 对 象 J5ON 的 方法 parse， 
并 将 前 面 的 字符 串 传递 给 
它 。 结 果 是 一 个 JavaScript 


对 象 。 


weight: 38 } 





将 指向 这 个 对 象 的 引用 存储 到 变 
量 fido 中 。 





你 还 可 执行 相反 的 操作 。 如 果 你 有 一 个 对 象 fido， 并 想 将 其 转换 为 字符 串 ， 只 
需 调 用 方法 JSON.stringify 妈 可， 如 下 所 示 : 





var fido = { 


,一 这 里 创建 了 一 个 


name: "Fido" 本 
， JavaScript 对 象 … 


breed: "Mixed", 
Wi 并 将 其 转换 为 字符 串 。 
}; < 
var fidoString = JSON.stringify (fido).; 





请 注意 ，JSON 格 式 不 支持 方法 (因此 不 能 在 JSON 字 符 串 中 包含 方法 park) ， 但 
它 支 持 所 有 的 基本 类 型 ， 还 有 对 象 和 数组 。 
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#10, 服务 器 端 JavaScript 


本 书 只 介绍 了 说 览 侨 和 客户 端 编 程 ， 但 你 也 可 将 学 到 的 JavaScript 技 


能 用 于 另 一 个 完全 不 同 的 领域 一 一 服务 奏 冰 编程 。 对 你 在 Internet 上 使 服务 器 端 代码 在 Internet 
用 的 Web 和 云 服务 来 说 ， 服 务 器 端 编 程 通常 必 不 可 少 。 如 果 你 要 新 建 服务 器 上 执行 。 


一 个 Web 镇 玉米 卷 在 线 订 购 系 统 ， 或 者 认为 下 一 个 重大 创意 是 反 社 会 
网 络 ， 就 需要 编写 在 云端 (Internet 服 务 器 上 ) 运行 的 代码 。 




















并 
闯 
Node.js 是 当前 流行 的 一 种 JavaScript 服 务 絮 端 技 术 ， 它 包含 自己 的 运 
行 环境 和 库 〈 就 像 客 户 端 JavaScript 使 用 训 览 器 提供 的 库 一 样 ) 。 与 3 
训 览 如 一 样 ，Node.js 运 行 JavaScript 时 使 用 的 也 是 单线 程 模 型 。 在 这 | | | 
种 模型 中 ， 每 次 只 有 一 个 执行 线程 。 因 此 ， 其 编程 模型 与 基于 异步 事 ~、 
件 和 事件 循环 的 浏览 器 类 似 。 ( 


Va » 口 口 去 四 >>、 客 F 码 OD T 
例如 ， 下 面 的 方法 启动 Web 服 务 器 ， 以 俩 听 到 来 的 Web 请 求 。 它 将 一 宝江 个 加 在 客户 喘 【 即 
» » » » VI -mr JE » » : FT Jo 
个 负责 处 理 请 求 的 处 理 程序 作为 参数 。 广 意 ， 要 指定 处 理 请 求 的 事件 
处 理 程序 ， 可 问 方 法 createServer 传 递 一 个 匿名 函数 。 





Nodejs 库 中 的 方法 http.createServer 
接受 一 个 实 参 ， 这 个 实 参 是 一 个 以 
匿名 函数 的 方式 指定 的 处 理 程 序 。 


http .createServer (function (request, response) { 
response.writeHead(200, {"Content-Type": "text/plain"}); 
response .write ("Hello World"); 
response .end () ; 
}) .listen (8888); 这 个 匿名 函数 负责 处 理 请 求 。 
它 在 有 请 求 到 来 时 作出 响应 ， 
将 字符 串 “Hello World” 发 送 
给 客户 端 。 


当然 ， 要 理解 Node.js 的 工作 原理 还 要 学 习 很 多 东西 ， 不 过 你 已 经 掌握 了 很 
多 有 关 对 象 和 函数 的 知识 ， 这 些 学 起 来 都 不 难 。 要 详细 了 解 Node.js， 需 要 
浆 读 相关 的 专 考 ， 除 此 之 外 ，http://nodejs.org 也 提供 了 很 多 教程 、 文 草 和 
演示 。 




















答 人 D ! ( 非 ) 运算 符 ，55 
才 万 1 (或) 运算 符 ，54, 55, 62-63, 74 
$ (美元 符号 ) 0 ( 圆 括号 ) 
jQuery 中 的 函数 ，624 调用 函数 68, 430, 439 
用 于 JavaScript 变 量 名 开头 ，13 指定 参数 97 
0 ( 零 ) ， 被 视 为 假 值 ，292 in 
人 & 上 (与 ) 运算 符 ，55, 62-63, 74 算术 运算 符 ，286-287, 312 
* ( 星 号 ) 运算 符 ， 为 乘法 算术 运算 符 ，15, 286 CA 
: (冒号 ) ， 分 隔 属 性 名 和 属性 值 ，179 一 (后 递减 运算 符 ) ，146-147 


，( 有 逗号) ， 分隔 对 象 的 不 同属 性 ，177, 179 ++ (后 递增 运算 符 ) ，146-147 

{ } ( 花 括 号 ) ( 双 引 号 ) 
定义 代码 块 ，17 用 于 将 属性 名 括 起 ，179 
定义 对 象 字 面 量 ，177, 522 在 JavaScript 用 于 将 字符 串 括 起 ，13 
































定义 函数 体 ，97 ; (分 号 ) ， 在 JavaScript 中 结束 语句 ，11, 13 
将 对 象 的 属性 括 起 ，177, 179 [] ( 方 括号 ) 
在 代码 中 必须 配套 ，59 用 于 定义 和 访问 数组 ，127, 129, 550 
(句点 表示 法 ) 用 于 访问 属性 ，209 
访问 对 象 的 属性 ，181, 209, 230 !== (严格 不 等 ) 运算 符 ，281 
Re ee _ (下划线 ) ， 用 于 JavaScript 变 量 名 开头 ，13 
= (等 号 ) 运算 符 ， 用 于 给 变量 赋值 ，11, 16, 275 A 
== (相等 ) 运算 符 
一 种 比较 运算 符 ，16, 55, 275-285, 311, 459 action 特 性 ，328 
与 === 的 异同 ，289 addEventListener 方 法 ，630 
---= (严格 相等 ) 运算 符 lor 函数 
55, 280-285, 311 用 于 与 用 户 交 流 ，25-26, 42, 46 
在 简单 的 战舰 游戏 中 指出 是 否 击 中 了 目标 ，59-60, 76 
/ ( 双 斜 枉 ) ， 在 JavaScript 中 用 于 注释 开头 ，13 alt 特 性 ，256 
/ ( 斜 杠 ) 运算 符 ， 用 作 除 法 算术 运算 符 ，15, 286 Rta Sl 
> (3 运算 符 ， 10, 55, 459 按 引 用 传递 ， 192 
>= (大 于 或 等 于 ) 运算 符 ，16, 55 按 值 传递 ，92_93, 192 
< (小 于 ) 运算 符 ，55, 459 
<= (小 于 或 等 于 ) 运算 符 ，55 2 
- ( 减 号 或 符号 ) 运算 符 加 
用 作 处 理 字 符 串 和 数字 的 算术 运算 符 ，286-287, 312 <body> 元 素 
用 作 单 目 运算 符 ，287 J 


ee 性 1 HTML 替换 元 素 的 内 容 ，245 
!= (不 等 ) 运算 符 ，16, 55 使 用 属性 inner 阵 换 元 素 的 内 容 
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添加 代码 ，32 
BOM (浏览 器 对 象 模型 ) ，627 
保留 字 ，12 
背景 图 像 
创建 HTML 页 面 ，320-321 
单元 格 ，322 
闭 包 
创建 练习 ，500, 514-515 
简介 ，493, 495-497 
将 国 数 表达 式 作 为 实 参 ，501 
实际 环境 ，502 
实现 神奇 的 计数 右 ，498-499 
使 用 事件 处 理 程序 来 创建 ，503-507 
比较 运算 和 他，55, 71 
编程 语言 学，9 
变量 
undefined 值 和 变量 268 
变量 的 词法 作用 域 ，488-490, 494 
变量 的 默认 值 ，50 
变量 中 的 对 象 ，186 
查找 与 变量 相关 的 错误 ，39 
代码 卫生 指南 ，111 
短暂 的 生命 周期 ，102 
简介 ，11 
将 对 象 赋 给 变量 ，192 
将 国 数 赋 给 变量 ，439, 449, 469 
命名 ，12-13, 100, 103, 108 
局 部 变量 
代码 卫生 指南 ，111 
方法 中 的 局 部 变量 ，206 
局 部 变量 的 词法 作用 域 ，488-490, 494 
阴 套 的 影响 ，486, 488-490, 494 
声明 ，103, 108 
识别 ，105, 120 
与 全 局 变量 比较 ，99, 106-107 
作用 域 ，101 
全 局 变量 
代码 卫生 指南 ，111 
滥用 ，391 
岁 套 的 影响 ，486, 488-490, 494 
全 局 变量 的 词法 作用 域 ，488-490, 494 
识别 ，105, 120 
与 局 部 变量 比较 ，99, 106-107 
作用 域 ，101 
设置 为 null，270 
声明 局 部 变量 ，103, 108 
声明 中 的 关键 字 var，97, 99 
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识别 ，91, 119 

使 用 伪 代 码 来 确定 所 需 的 变量 ，50 
数组 中 的 变量 ，127, 129 

网 页 重新 加 载 和 变量 ，108 
用 作 条 件 ，23 

在 for 语 名 中 声明 ，152 

在 函数 内 和 国 数 外 声明 ，98 
遮 住 ，104 

指向 函数 的 变量 ，436 

自由 变量 ，495-496, 501, 516 
作为 实 参 传递 给 函数 ，89 
作用 域 ，101 








变量 存储 的 内 容 ，186-187 

变量 的 词法 作用 域 ，488, 494 

变量 的 生命 周期 ，102 

变量 的 作用 域 ，101 

编写 JavaScript 代 码 。 田 请 参 几 “货真价实 的 战舰 游戏 ” 


单 的 战舰 游戏 ”和 “代码 ” 
else 让 语句 ， 用 于 作 决 策 ，22-23 
null, 256, 270-271, 274, 278 
prompt 国 数 ，46, 53 
while 语 句 ， 用 于 执行 代码 ，18-21 
帮助 设计 程序 的 流程 图 ，45 
变量 的 默认 值 undefined，50 
表达 式 ，15-16, 40 
查找 代码 错误 
练习 ，14, 39, 203, 224 
使 用 控制 台 ，68 
重 构 代码 ，156, 159 
重用 代码 ，71, 79, xii 
串 接 ，345, 348 
代码 卫生 指南 ，111 
对 数字 和 字符 串 进 行 比较 ，275-277, 281 
对 象 中 的 重复 代码 ，208 
分 析 代 码 ，80-81, 116 
国 数 和 代码 重用 ，83-88 
简介 ，3, 7-8 
生成 随机 数 ，67-68 
实施 质量 保证 ，61, 69-70 
使 用 = 运算 符 给 变量 赋值 ，11, 16, 275 
使 用 == 运 算 符 
与 === 区 六 付 比 愧 ，289 
作为 比较 运算 符 ，16, 55, 275-285, 311, 459 
使 用 === 运 算 符 
使 用 变量 ，11-13 
与 == 运 算 符 比较 ，289 
作为 比较 运算 符 ，55, 280-285, 311 
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伪 代 码 与 用 户 交 流 ，25-27, 42 
编写 -A873 在 控制 台中 显示 对 象 ，185, 608 
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错误 地 调用 函数 ，94 
代码 卫生 指南 ，111 
调用 函数 ，85-86, 117 
递归 地 调用 图 数 ，634-635 
定义 ，132 
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定义 顺序 ，389 
赋 给 变量 ，439, 449, 469 
跟踪 函数 的 执行 过 程 ，96 
关键 字 ，430 
函数 表达 式 
赋 给 变量 ，439 
浏览 器 如 何 处 理 ，434-436, 465 
赫 代 ，481 
与 图 数 声明 比较 ，431, 437 
执行 代码 ，438, 466 
函数 调用 中 的 圆 括 号 〈0) ，68, 430, 439 
国 数 剖析 ，97 
函数 声明 
分 析 ，431 
赋 给 变量 ，439 
简介 ，430 
浏览 器 如 何 处 理 ，431-433, 436, 465, 483 
匿名 函数 中 的 冰 数 再 明 ，483-485 
与 国 数 表 达 式 比较 ，431, 437 
执行 代码 ，438, 466 
函数 体 
其 中 的 形 参 ，84-85 
在 其 中 声明 变量 ，97 
国 数 形 参 
传递 实 参 ，89 
简介 ，84, 88 
将 实 参 的 值 赋 给 形 参 ，85 
命名 ，97 
识别 ，91, 105, 119, 120 
未 在 函数 中 使 用 ，94 
与 实 参 比较 ，90 
函数 中 的 变量 
比较 局 部 变量 和 全 局 变量 ，99, 106-107 
变量 的 词法 作用 域 ，488-490, 494 
变量 的 默认 值 ，50 
重新 加 载 网 页 ，108 
关键 字 var， 97, 99 
局 部 和 全 局 变量 的 作用 域 ，101 
命名 ，12-13, 100, 103, 108 
藤 套 ，486, 488-490, 494 
声明 局 部 变量 ，103, 108 
在 国 数 内 和 国 数 外 声明 ，97-99 
遮 住 ，103 
作为 实 参 进行 传递 ，89 
简介 ，79, 88, xii 
将 JavaScript 放 在 什么 地 方 ，109 
将 处 理 数 组 的 代码 组 织 为 函数 ，157-162 
将 对 象 传递 给 函数 ，192-194, 198 








将 函数 传递 给 函数 ，409, 443-448, 468, 482, 486, 514 


命名 ，97 


内 置 函 数 ，71, 91, 119 
匿名 函数 
创建 ，477-478, 512-513 
简介 ，475-476, 482, xx_xxi 
可 读 性 ，480 
脑筋 急 转 弯 ，509, 518 
让 代码 更 紧 竣 ，479 
阿 畏 数 传递 国 数 ，482, 486, 514 


在 构造 函数 中 将 函数 赋 给 方法 属性 ，530-532, 557 





没有 思春 的 问题 ，97, 108 
嵌 套 ，485-486, 488-490, 494 
识别 练习 ，91, 119 
实 参 
按 值 传递 ，92-93 
传递 ，88-89, 92-94 
简介 ，85 
识别 ，91, 105 
顺序 不 正确 ，97 
与 形 参 的 异同 ，90 
严峻 的 JavaScript 挑 战 ，487, 508, 517 
引用 
传递 引用 ，479 
给 引用 赋值 ，477 
国 数 调用 中 的 引用 ，491 
简介 ，430, 476 
标 代 国 数 表达 式 ，481 
用 于 将 函数 作为 实 参 传递 给 男 一 个 函数 ，486 
在 函数 中 使 用 引用 ，491, 494 
与 方法 比较 ，206 
作用 域 
变量 的 词法 作用 域 ，488-490, 494 
局 部 变量 和 全 局 变量 的 作用 域 ，101 
作为 对 象 ，612-613 
作为 一 本 会 民 
从 国 妆 返回 国 数 ，450-456, 470, 472 
简介 ，442-443 
使 用 数组 的 方法 sort，457-463, 472-473 
替换 函数 表达 式 ，481 
向 函数 传递 函数 ，443-448, 468, 482, 486, 514 
严峻 的 JavaScript 挑 战 ，486, 508, 517 
作为 值 ，439-440, 467 








函数 表达 式 


赋 给 变量 ，439 
浏览 器 如 何 处 理 ，434-436, 465 
赫 代 ，481 

与 图 数 声 明 比 较 ，431, 437 
执行 代码 ，438, 466 


函数 内 套 ，485-486, 488-490, 494 
函数 声明 


分 析 ，431 
赋 给 变量 ，439 
浏览 器 如 何 处 理 ，431-433, 436, 465, 483 
匿名 函数 ，483-485 
与 函数 表达 式 比较 ，431, 437 
执行 代码 ，438, 466 
函数 实 参 
按 但 传 建 ; 92-93 
传递 ，88-89, 92-94 
简介 ，85 
识别 ，91, 105, 119, 120 
顺序 不 正确 ，97 
为 对 象 时 ，192 
与 形 参 的 异同 ，90 
函数 体 
声明 变量 ，9% 
形 参 ， ， 
国 数 引用 
传递 ，479 
赋值 ，477 
简介 ，430, 476 
替代 函数 表达 式 ，481 
用 于 将 函数 作为 实 参 传递 给 其 他 函数 ，486 
在 国 数 调用 中 的 应 用 ，491 
在 国 数 中 的 应 用 ，491, 494 
后 递减 运算 符 (--) ，146-147 
后 递增 运算 符 (++) ，146-147 


花 括 号 ({ }) 
定义 代码 块 ，17 
定义 对 象 字 面 量 ，177, 522 
定义 图 数 体 ，97 
os 
在 代码 中 必须 配套 ， 
回调 函数 。 ee 250 
或 (I) 运算 符 ，54, 55, 62-63, 74 


货真价实 的 战舰 游戏 
QA，370-371 
按钮 fre 的 事件 处 理 程序 ，359 
创建 HTML 页 面 
表格 ，322 
背景 ，320-321 
简介 ，320 
使 用 hit 和 miss 类 ，327, 375 
添加 CSS，324-326 
指出 是 否 击 中 战舰 ，326 
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对 象 controller 编写 ，56 
处 理 玩 家 的 猿 测 ，350-354 if 语句 ， 用 于 作 决 策 ，22 
记录 猜测 并 开火 的 次 数 ，355-356 


简介 ，329 indexOf 方 法 ，298, 343, 345, 352, 368, 610 
将 输入 交 给 控制 姻 ，360 Infinity (或 -Infinity) ，JavaScript，274 
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0 > init 函 数 ，249, 251, 359, 361, 369, 389-391, 630 
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试 驾 ，357 innerHeight 属 性 ，627 
实现 ，349-357 innerHTML 属性 
简介 ，245 
2 设置 文本 ，331 
洁 诉 视图 是 人 否 击 中 了 战舰 ，347 株 换 元 素 <bodv> 中 元 素 的 内 容 ，245 
获取 游戏 板 尺 寸 的 冰 数 parseGuess ，353 Os 
试 驾 ，348 修改 元 素 内 容 ，239, 241-242, 247-248 
实现 ，341-348 innerWidth 属 性 ，627 
判断 是 否 击 中 ，344-345 ee 
判断 是 否 击 中 了 战 般 ，343 jhe 
判断 战舰 是 否 被 击 沉 ，346 = »; 
与 视图 交互 ，336 玉 设 置 其 样式 ， 
战舰 的 表示 ，338-340, 378-379 instanceof 运 算 符 ，305, 315, 543, 547 
币 状 态 的 麦 示 
对 的 表示，337, 377 Internet Explorer 8 〈IE8 ) 
简介 ，329 在 正 8 和 更 早 的 版 本 中 设置 事件 对 象 ，399, 631 
试 驾 ，335 IO 事件 ，413 
实现 ，329, 331-334 isNaN 函 数 ，273, 353 
与 模型 交互 ，336 0 
指出 是 否 击 中 了，347 isSunk 方 法 ， 货 真 价 实 的 战舰 游戏 ，346 
跟 蹊 战舰 ，337 
工具 包 ，319 J 
获取 玩家 的 猿 测 ，358-361 
简介 ，xXvii 一 Xix Java 
设计 这 款 游戏 ，329-330, 376 简介 ，6 
试 驾 ，370 与 JavaScript 比 较 ，5 
随机 放 蛙 成 舰 ，362-368, 380 Java， 传 统 的 面向 对 象 编程 ，564 
战舰 的 起 始 位 置 ，366 人 
人 i 274 
、 CR 0 nfinity, 
货真价实 的 战舰 游戏 中 的 表格 单元 格 ，322 ee 
]Query，024 
| node.js 库 ，637 
保留 字 ，12 
编写 。 参 见 “ 编 写 JavaScript 
id 属性 加 不 区 分 大 小 写 ，12 
设置 为 数字 字符 电 ，328 处 理 异 常 ，629 
用 于 标识 元 素 ，243 大 统一 理论 ，612 
用 于 访问 元 素 ，238 发 展 历程 ，6 
IE8 (Internet Explorer 8 ) 服务 右 端 ，637 
在 IE8 和 更 早 的 版 本 中 设置 事件 对 象 ，399, 631 加 入 到 网 页 中 ，2-3 
if/else 语 句 简介 122 .元 这 
作 决策 ，23 蠕虫 洞 getElementById，237 
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数组 ，127, 132-134 确定 战舰 的 位 置 ，343 
i 加 号 (+) 
提供 的 对 象 ，214 用 于 拼接 字符 串 ，15, 133, 142, 354 
J 作为 算术 运算 符 ，286-287, 312 
) 假 值 和 真 值 ，291-293, 313 
与 API 相 关 的 事件 ，413 简单 的 战舰 游戏 
与 DOM 交 互 ，233 过 程 型 设计 ，329 
与 Java 比 较 ，5 检查 用 户 的 猜测 ，54 
语法 ，13-14, 39 检查 战舰 是 否 被 击 沉 ，57 
在 网 页 中 添加 ，4-5 简介，44 
值 72-274,281,292 设计 ，45-_46 
重要 性 ，5 随机 地 指定 战舰 位 置 ，66-68 
JavaScript 代 码 中 的 空白 ，13 添加 HIML 以 链接 代码 ，45-46 
, 添加 检测 是 否 击 中 了 战舰 的 代码 ，56-57, 77 
JavaScript 区 分 大 小 写 ，12 伪 代 三 
《JavaScript 权 威 指南》 ，296 编写 ，47-48, 73 
JavaScript 语 法 ee 70 
人 定 需 要 的 变量 ，50 
三 找 错 误 ，14, 39 实现 牡 环 ，51 
辐 转换 为 JavaScript 代 码 ，52 
JavaScript 中 的 注释 ，13 各 用 户 显 示 统 计数 据 ，58 
JavaScript 中 的 字符 ，297 找 出 代码 中 的 错误 ，68 
1 质量 保证 ，61, 69-70 
简介 ，624_625 减 号 (-) 运算 符 
在 线 文档 和 教程 ，625 用 作 处 理 字 符 串 和 数字 的 算术 运算 符 ，286-287, 312 
Jscript, 6 SR 287 
JSON 对 象 ，214, 636 0 - 
基本 类 型 脚本 语言 ，5 
简介 ，23, 266 解释 型 语言 ，5 
识别 未 定义 的 值 ，267-268, 308 局 部 变量 
与 对 象 比 较 ，187 代码 卫生 指南 ，111 
作为 对 象 和 基本 类 型 的 字符 串 ，294-296 方法 中 的 局 部 变量 ，206 
继承 局 部 变量 的 词法 作用 域 ，488-489, 494 
对 象 中 的 继承 ，569-572 幅 套 的 影响 ，486, 488-490, 494 
改变 内 置 行为 ，608-609 声明 ，103, 108 
扩展 内 置 的 对 象 ，610 生命 周期 ，102 
一 个 原型 继承 另 一 个 原型 ，594-599, 606, 620 识别 ，105, 120 
原型 链 中 的 继承 ，592-593, 619 与 全 局 变量 比较 ，99, 106-107 
级 联 样式 表 (CSS) 。 另 请 参见 “CSS (级 联 样式 表 ) ” A 
a 
0 名 点 表示 法 (.) 
击 中 ， 货 真 价 实 的 战 靓 游戏 访问 对 象 的 属性 ，181, 209, 230 
表示 击 中 和 未 击 中 的 类 ，326-327, 375 与 this 对 象 一 起 使 用 ，202 
告诉 视图 击 中 了 战舰 ，347 与 引用 变量 一 起 使 用 ，186 


判断 是 否 击 中 ，344-345 
判断 战舰 是 否 被 击 沉 ，346 
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keypress 事 件 ，419 
空 数 组 ，134, 153-154, 365, 367, 549-550 
控制 台 

查找 错误 ，68 

打开 浏览 绮 ，28 

简介 ，214 

在 货真价实 的 战舰 游戏 中 作 粗 ，370 


L 


lastIndexOf 方 法 ，300 
length 属 性 ， 297, 301, 303 
LiveScript, 6 


load 事 件 
onload 属 性 
设置 为 匿名 函数 ，476-477 
设置 为 一 个 函数 ，249, 359, 392, 394-395, 406-407， 
422 
指定 处 理 程序 ，385-386, 389-390, 410 
简介 ，419 
location 方 法 ，627 


类 


标识 一 组 元 素 ，243 
货真价实 的 战舰 游戏 中 的 类 hit 和 miss，326-327, 375 
特性 class，255 





instanceof ,305, 315, 943, 547 
typeof 练 习 ，269 
对 象 相 等 ，288-290, 314 
简介 ，xvi 一 xvii 
将 == 和 === 运 算 符 用 于 不 同 的 类 型 ，275-285, 311 
使 用 null，55, 270-271, 274, 310 
熟练 掌握 类 型 ，301-304 
值 和 类 型 ，272-274, 281, 292 
执行 算术 运算 时 的 自动 类 型 转换 ，286-287, 312 
转换 ，277-280 
练习 ，Xxxiii 


列表 
NodeList，397 
返回 一 个 元 素 对 象 列 表 ，397 
使 用 JavaScript 在 播放 列表 中 添加 歌曲 (示例 )，253, 262 








使 用 jQuery 找 出 id 为 playlist 的 元 素 的 所 有 子 <l 这 元素 ，625 


零 (0) ， 被 视 假 值 ，292 
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流程 图 ， 用 于 设计 程序 ，45 
训 览 器 对 象 模 型 (BOM) ，627 
训 览 器 
处 理 函 数 表 达 式 ，434-436, 465 
处 理 函 数 声明 ，431-433, 436, 465, 483 
处 理事 件 ，383, 403 
处 理 条 件 语句 ，434 
打开 控制 台 ，28 
分 析 HTML 并 创建 DOM，236, 261 
根据 网 页 设置 窗口 的 尺寸 ，627 
加 载 并 执行 JavaScript，3 
加 载 代 码 ，31 
事件 ，404 
提供 的 对 象 ，214 
推荐 ，Xxvi 
运行 JavaScript，xxxii 
在 IE8 和 更 早 的 版 本 中 设置 事件 对 象 ，399, 631 
执行 代码 ，433 








Mac 文 本 编辑 器 TextEdit，31 
match 方 法 ，300, 633 
Math.foor 图 数 ，68, 131, 365-367 
Math 对 象 ，214, 551 
Math.random 国 数 ，67-68, 88, 131, 365-367 
Microsoft，Jscript 谷 介 ，6 
model 对 象 ， 货 真 价 实 的 战舰 游戏 
fire 方 法 ，342-343, 346 
告诉 视图 是 否 击 中 ，347 
跟踪 战舰 ，337 
简介 ，329, 336 
判断 是 否 击 中 ，344-345 
判断 是 否 击 沉 了 战舰 ，346 
确定 游戏 板 尺 寸 的 国 数 parseGuess，353 
试 驾 ，348 
实现 ，341-348 
与 视图 交互 ，336 
战舰 的 表示 ，338-340, 378-379 
战舰 状态 的 表示 ，337, 377 
mousemove 事 件 ，405-406, 419, 424 
mouseout 事 件 ，419 


mouseover 事 件 ，419 

面 器 对 象 的 编程 ，180, 564 

冒号 (:) ,分 隔 属 性 名 和 属性 值 ，179 
美元 符号 ($) 

jQuery 中 的 函数 ，624 

用 于 JavaScript 变 量 名 开头 ，13 
名 

变量 ，12-13, 100, 103, 108 
构造 图 数 ，532 

图 数 ，97 

属性 ，179 

同名 的 局 部 变量 和 全 局 变量 ，104 
目标 ，398-399, 401 
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NaN (不 是 数字 ) 值 ，272-274, 281, 292 
Netscape, 6 
node.jSs 库 ，637 
NodeList，397 
null, $5, 296, 270-271, 274, 278, 292 
内 置 对 和 象 ，548-551, 608-610 
内 置 函数 ，71, 91, 119 
匿名 函数 
创建 ，477-478, 512-513 
简介 , 475-476, 482, xx- xxi 
可 读 性 ，480 
让 代码 更 紧凑 ，479 
回 函 数 传递 图 数 ，482, 486, 514 
用 于 访问 属性 ，509, 518 
在 构造 函数 中 赋 给 方法 ，530-532, 557 
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Object 对 象 

改变 内 置 行为 ，608-609 

简介 ，551, 607 

作为 原型 ，607 
onclick 属 性 ，390-391, 393-398, 504-507, 630 
onload 事 件 处 理 程序 ，249, 359, 402 
onload 事 件 处 理 函 数 ，249-250, 359, 389-390 


onload 属 性 
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将 事件 处 理 程序 赋 给 它 ，385-386, 389-390, 410, 630 


设置 为 匿名 函数 ，476-477 





设置 为 函数 ，249, 359, 392, 394-395, 406_407, 422 


用 于 支持 BOM，627 
onmousemove 必 性 ，405-406, 414, 424, 426 
onmouseout 属 性 ，414, 426 
onresize 属 性 ，415, 427 
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parseGuess 国 数 ，351-354 
parse 方 法 ，JSON 中 ，636 
pause 事 件 ，419 

position: absolute ，324-323, 328 
position: relative, 324, 328 

<p> (有 段落) 元 素 


使 用 JavaScript 来 修改 ，247 
修改 属性 innerHTML ，242 


print 方 法 ，627 

processGuess 方 法 ，349-350, 357 
prompt 困 数 ，46, 53, 55 

push 方 法 ，152 

拼接 字符 串 ，15, 133, 142, 286-287, 312, 354 
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querySelectorAll 方 法 ，626 
querySelector 方 法 ，626 
汽车 自动 制造 机 应 用 程序 (示例) ，195-197 
全 局 变量 
代码 卫生 指南 ，111 
词法 作用 域 ，488-490, 494 
滥用 ，391 
嵌 套 的 影响 ，486, 488-490, 494 
少 用 的 原因 ，108 
生命 周期 ，102 
识别 ，105, 120 
与 局 部 变量 比较 ，99, 106-107 
在 JavaScript 中 滥用 ，108 
庶 住 ，104 
作用 域 ，101 
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RegExp 对 象 ，214, 551, 632 
removeEventListener, 630 
replace 方 法 ，300 
reportError 方 法 ，587, 618 
resize 事 件 ，419 

return 语 句 ，95-97 
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<Script> 元 素 
src 特 性 ，34-35 
简介 ，4 
剖析 ，35 
<script> 标 签 
放 在 HTML 页 面 的 <head> 或 <body> 元 素 中 ，32 
起 始 标签 和 结束 标签 ，35 
setAttribute 方 法 ，255, 333, 391 
setInterval 揣 数 ，410, 413, 425 
setInterval 方 法 ，627 
setTimeout 国 数 ，410, 480, 501 
setTimeout 方 法 ，407-413, 627 
showAnswer 处 理 程序 ，413 
slice 方 法 ，300 
split 方 法 ，299 
<Script> 元 素 的 src 特 性 ，34-35 
src 属 性 ，390, 391 
substring 方 法 ，299-300, 302, 304 
Sun Microsystems, 6 
设计 
货真价实 的 战舰 游戏 的 设计 ，329-330, 376 
简单 的 战舰 游戏 ，45-46 
示例 使 用 的 HTML 骨架 ，xxxiv 
示例 文件 ，xxxiv 
示例 文件 ， 下 载 ，xxxiii 
事件 
DOM, 413 


dragstart, 419 
drop, 419 
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1L/O, 413 
keypress, 419 
load 419。 男 请 参见 “加 载 事 件 ” 
mousemove, 405—406, 419, 424 
mouseout, 419 
mouseover, 419 
onclick 属 性 ，390-391, 393-398 
pause, 419 
resize, 419 
touchend, 419 
touchstart, 419 
unload, 419 
创建 啊 应 事件 的 游戏 ，388-392 
单 击 ，407, 419, 624 
定时 器 ，407-409 
队列 和 事件 ，404 
简介 ，383, 419 
与 API 相 关 的 事件 ，413 
事件 通知 练习 ，382, 421 
事件 啊 应 练习 ，415, 427 
图 像 游 戏 和 事件 

添加 图 像 ，393-397 


定单 击 事件 处 理 程序 ，396-397 
将 事件 处 理 程序 赋 给 属性 onclick，390-391, 393-398 


创建 ，411-414, 422, 426 
事件 类 型 ，407 
事件 列表 ，419 
使 用 函数 setInterval，410, 425 
啊 应 事件 ，387 
与 训 蜗 强 讨 论 事 件 ，403 


事件 处 理 程序 


onload, 249 

timerHandler, 407 

创建 ，385-386 

赋 给 属性 ，407 

回调 国 数 和 事件 处 理 程序 ，250 


货真价实 的 战舰 游戏 中 的 事件 处 理 程序 ，358-359, 361 


简介 ，384 
事件 对 象 ，399-402, 423 


使 用 addEventListener 来 添加 ，630 


使 用 函数 setInterval，410, 425 
使 用 函数 setTimeout，407-413 
异步 编码 

onload，249 

timerHandler, 407 

创建 ，385-386 

赋 给 属性 ，407 


回调 函数 和 异步 编码 ，250 
货真价实 的 战舰 游戏 中 的 异步 编码 ，358-359, 361 
使 用 函数 setInterval，410, 425 
使 用 图 数 setTimeout，407-413 
种 类 ，252 
用 来 创建 闭 包 ，503-507 
种 类 ，252 
事件 对 象 
事件 处 理 程序 和 事件 对 象 ，399-402, 423 
for 属 性 ，401 
在 IE8 和 更 早 的 版 本 中 设置 事件 对 象 ，399, 631 
事件 列表 ，419 
使 用 catch/try 来 处 理 异常 ，629 
使 用 jQuery 变换 界面 元 素 ，625 
使 用 方法 扩展 原型 String，610-611, 621 
树 ，DOM 的 结构 ，235 
属性 
JavaScript 文 持 的 属性 ，296 
比较 方法 和 函数 ，206 
所 历 对 象 的 属性 ，209 
代码 错误 查找 练习 ，203 
独特 的 属性 ，546-547 
访 占 ，181 
继承 ，571 
简介 ，175 
没有 思春 的 问题 ，185 
命名 ，179 
判断 来 自 实例 还 是 原型 ，586-587, 592, 618 
使 用 this 对 象 ，202, 204-206, 219 
随时 添加 或 删除 ，184 
添加 ，182 
未 定义 的 值 和 属性 ，268 
修改 ，182 
原型 链 中 的 属性 ，592-593, 619 
用 于 计算 ，182 
在 原型 中 修改 ，582, 585 
字符 串 属性 简明 教程 ，297-300 
值 和 属性 ，176, 219 
作为 属性 集合 的 对 象 ，174 
数字 
NaN (不 是 数字 ) 值 和 数字 ，273-274, 281, 292 
国 数 prompt 返 回 数字 的 字符 串 表 示 ，55 
将 其 与 字符 串 比 较 ，275-277, 281 
使 用 运算 符 + 来 处 理 字符 串 和 数字 ，286-287 
作为 对 象 ，296 
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作为 基本 类 型 ，266 
数组 字面 量 语法 ，550 
数组 
for 循 环 ，140-142, 144-145, 147, 169 
while 循 环 ，17-21 
重用 代码 ，156 
初始 化 计数 器 ，140 
创建 
空 ，151 
值 ，128 
最 有 效 的 气泡 配方 代码 ，164-165, 171 
代码 排列 练习 ，139, 168 
迭代 ，138, 140 
对 象 向 套 层 级 数 ，348 
多 少 个 元 素 ，134 
访问 元 素 ，129 
更 新 元 素 ，129 
简介 ，xiiixv 
将 处 理 数 组 的 代码 组 织 为 函数 ，157-162 
“汽车 自动 制造 机 ”应 用 程序 (示例) ，195-197 
空 ，134, 153-154, 365, 367, 549-550 
密室 商谈 ，148-149, 170 
声明 变量 ，152 
试 驾 ，143, 147, 155 
属性 length，130 
索引 ，129, 134, 152, 163 
填充 播放 列表 ，253, 262 
未 定义 的 值 ，268 
稀疏 ，152 
元 素 的 类 型 ，134 
元 素 的 排列 顺序 ，134 
在 货真价实 的 战舰 游戏 中 判断 是 否 击 中 ，344-345 
在 货真价实 的 战舰 游戏 中 判断 是 否 击 中 以 及 指定 战舰 的 
位 置 ，338 
自动 造句 应 用 程序 (示例) ，131-133 
字面 量 ，151-152 
数组 的 length 属 性 ，130 
数组 的 sort 方 法 ，457-463, 472 
双 和 斜 枉 (//) ， 用 于 JavaScript 注 释 开 头 ，13 
双 引 号 “”) 
用 于 将 属性 名 括 起 ，179 
在 JavaScript 中 用 于 将 字符 串 括 起 ，13 
随机 地 生成 战舰 的 位 置 ， 在 货真价实 的 战舰 游戏 中 ，362- 
368, 380 


随机 数 的 生成 ，67-68 
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索引 ， 数 组 中 ，129, 134, 152, 163 简介 ，267-268, 308 
没有 return 语 名 返回 的 值 ，97 
T 为 假 值 ，292 
Snvll 比 入 ;278 
<table> 元 素 与 null 的 异同 ，270, 310 
创建 HTML 页 面 ，322 Unicode 值 ，281 
使 用 CSS 进 行 定 位 ，325 unload 事 件 ，419 


<td> 元 素 ，322, 325, 327-328, 333 


this 对 象 V 


用 法 ，202, 204-206, 219 


用 于 构造 国 数 中 ，528-529, 532 var 关 键 字 
原型 和 this，580 简介 ，11 
timerHandler 国 数 ，407-409 用 于 变量 声明 ，97, 99 
toLowerCase 方 法 ，300 view 对 象 ， 货 真 价 实 的 成 舰 游 戏 
a 简介 ，329 
toString 方 法 ，531, 548, 557, 607-608 试 驾 ，335 
touchend 事 件 ，419 实现 ，331-334 
touchstart 事 件 ，419 与 模型 交互 ，336 








toUpperCase 方 法 ，300 旨 出 是 否 击 中 了 战舰 ，347 


trim 方 法 ，300 W 


true 和 false (布尔 值 ) ，13, 1$-16, 291-293, 313 


try/catcn， 用 于 处 理 异 销 629 W3C 文 档 网 站 ，627 

typeof 运 算 符 ，269, 305, 309, 315, 542 Web 训 览 器 

特性 处 理 函 数 表达 式 ， 434-_436, 465 
ee 处 理 函 数 声 明 ，431-433, 436, 465, 483 
alt, 256 处 理事 件 ， 383, 403 
class, 255 处 理 条 件 语句 ，434 


打开 控制 台 ，28 

分 析 HTML 并 创建 DOM，261 
根据 网 页 调整 窗口 的 尺寸 ，627 
加 载 代码 ，31 

加 载 并 执行 JavaScript，3 


使 用 getAttribute 来 获取 ，256 
使 用 setAttribute 来 设置 ，255 
使 用 代码 来 设置 ，254 

元 素 疫 有 时 ，256 














条 件 事件 ，404 
别 太 哆 呆 ，65, 74 提供 的 对 象 ，214 
训 质 三 如 何 处 理 ，434 推荐 使 用 的 Web 浏 览 器 ，xxvi 
使 用 布尔 表达 式 和 条 件 来 作 决 策 ， 2 运行 JavaScript，Xxxii 
使 用 布尔 运 扯 符 进 行 组 合 ， 62_63, 74 在 下 8 和 更 早 的 版 本 中 设置 事件 对 象 ，399, 631 
在 while 语 句 中 使 用 ，17-21 执行 代码 ，433 
在 数组 中 测试 ，140 se 
oa Web 训 砚 硕 之 战 ，6 
作为 变量 或 字符 串 ，23 
while 循 环 
U 简介 ，17 
用 于 执行 代码 ，18-21 
undeftined， 变 量 的 默认 值 ，50 与 for 比 较 ，144-145 


undefined 值 wickedlysmart.com, vill 
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window 对 象 

addEventListener 方 法 ，630 

confirm 方 法 ，627 

history 方 法 ，627 

innerHeight 属 性 ，627 

innerWidth 属 性 ，627 

location 方 法 ，627 

onload 属 性 
将 事件 处 理 程 序 赋 给 它 ，385-386, 389-390, 410, 630 
设置 为 匿名 国 数 ，476-477 
设置 为 一 个 国 数 ，249, 359, 392, 394-395, 406-407， 

422 

用 于 支持 BOM，627 

onresize 属 性 ，415, 427 

print 方 法 ，627 

setInterval 方 法 ，627 

setTimeout 国 数 ，407-413 

setTimeout 方 法 ，627 

包含 的 方法 和 属性 ，627 

创建 onload 事 件 处 理 程序 ，249, 359, 402 














对 BOM 的 支持 627 
简介 ，214 
全 相等 运算 符 ，284。 另 请 参见 “严格 相等 (===) 运算 
人 符 ” 
网 页 


创建 动态 的 网 页 ，5-6 
创建 交互 式 网 页 ，319 
根据 网 页 调整 窗口 的 尺寸 ，627 
使 用 JavaScript 与 网 页 交互 ，233 
网 页 中 的 JavaScript，2-3 
在 HTML 页 面 中 添加 代码 ，32 
在 网 页 中 使 用 <script> 元 素 ，4 
作为 应 用 程序 ，9 
伪 代 码 
编写 ，47-48, 73 
人 硝 定 需 ea 
实现 循环 ， 
Rn i 击 中 ，59-60, 76 
转换 为 JavaScript 代 码 ，52, 164-165, 171 
未 击 中 ,货真价实 的 战舰 游戏 
表示 击 中 和 未 击 中 的 类 ，326-327, 375 
ee 


文本 编辑 器 ，3 
a 
文档 对 象 
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DOM 中 的 文档 对 象 ，235, 626 
getElementById 方 法 

传递 不 存在 的 id，245 

返回 null，256, 270-271 

访问 图 像 ，388-392 

获取 元 素 ，231, 240, 247-248 

区 分 大 小 写 ，230 

用 于 查找 元 素 并 修改 其 内 容 ，238-239 

在 货真价实 的 战舰 游戏 中 获取 指 癌 按钮 fre 的 ?| 

用 ，359 

作为 文档 对 家 ，237 
getElementsByClassName 方 法 ，245, 626 
getElementsByName 方 法 ，626 
getElementsByTagName 方 法 ，245, 397 
简介 ，214, 240 
用 来 编写 写 国 数 以 便 与 用 户 交 流 ，25-26, 42 


无 限 循环 ，55 
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稀 玻 数组 ，152 
下 划 线 (_) ， 可 用 于 变量 名 开头 ， 
相等 (==) 运算 符 
一 种 比较 运算 符 ，16, 55, 275-285, 311, 459 
与 === 运 算 符 的 异同 ，289 
小 于 (<) 运算 符 ，55, 459 
小 于 或 等 于 (<=) 运算 符 ，55 
斜 杜 (/) 运算 符 ， 用 作 除 法 算术 运算 符 ，15, 286 
星 号 (*) 运算 符 ， 用 作 乘 法 算术 运算 符 ，15, 286 
学 习 
JavaScript, 9 
小 提示 ，xxxi 
学 习 原 则 ，xxviii 











循环 
do while 循 环 ，364, 373 
for 循 环 
重新 编写 ，147 
用 来 迭代 数组 ，140-142, 169 


与 while 循 环比 较 ，144-145 

在 货真价实 的 战舰 游戏 中 猜测 战舰 的 位 置 ，343 

在 货真价实 的 战舰 游戏 中 添加 新 战舰 ，365, 367 
while 循 环 

何 和 5， 17 

用 来 执行 代码 ，18-21 

与 for 循 环比 较 ，144-145 
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将 伪 代 码 转 换 为 JavaScript 代 码 ，52 
使 用 内 部 循环 和 外 部 循环 ，368 
使 用 伪 代 码 来 实现 循环 ，51 

无 限 循环 ，55 
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严格 相等 (===) 运算 符 
一 种 比较 运算 符 ，55, 280-285, 311 
与 == 运 算 符 的 异同 ，289 
异步 编码 
alt 特 性 ，256 
DOM 中 的 事件 对 象 ，399-402, 423 
事件 ，404 
事件 处 理 程序 
onload, 249 
timerHandler, 407 
创建 ，385-386 
赋 给 属性 ，407 
回调 图 数 ，250 
货真价实 的 战舰 游戏 ，358-359, 361 
简介 ，383 
类 型 ，252 
使 用 addEventListener 添 加 ，630 
使 用 函数 setInterval，410, 425 
使 用 函数 setTimeout，407-413 
事件 简介 ，383 
事件 通知 练习 ，382, 421 
啊 应 事件 
创建 猜 图 游戏 ，388-392, 411-414, 422, 426 
简介 ，387 
将 事件 处 理 程序 赋 给 ，390-391, 393-398 
练习 ，415, 427 
在 猿 图 游戏 中 添加 图 像 ，393-397 
和 定单 击 处 理 程序 ，396-397 
与 浏览 器 讨论 事件 ，403 
异步 编码 事件 处 理 程序 
事件 处 理 程序 
创建 闭 包 ，503-507 
异常 ， 处 理 ，629 





应 用 程序 。 另 请 参见 “货真价实 的 战舰 游戏 ”和 “人 向 





舰 洲 戏 ” 
JavaScript, 5 
编写 JavaScript 代 码 ，29-35 
创建 交互 式 ，319 
作为 应 用 程序 的 网 页 ，9 
川 六 
与 用 户 交 流 
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使 用 函数 alert，25-26, 46 
使 用 函数 console.log，25--27 
使 用 函数 prompt，46, 53 
使 用 文档 对 象 模型 ，25 
与 API 相 关 的 事件 ，413 
语句 
编写 语句 ，10 
以 分 号 结尾 ，11, 13 
语句 中 的 变量 ，11-13 
与 〈&&) 运算 符 ，55, 62-63, 74 


圆 括号 (0) 
国 数 调 用 中 ，68, 430, 439 
形 参 列表 中 ，97 
元 认 知 ，XXix 
元 表 <div> 
旨 定 独一无二 的 id，243 
使 用 CSS 进 行 定位 ，324-325 
元 素 。 另 请 参见 “getElementById 方 法 ” 
标识 ，243 
从 DOM 中 获取 ，241 
根据 id 从 DOM 中 获取 ，245 
获取 、 创 建 、 添 加 或 删除 ，258 
没有 指定 的 属性 ，256 
设置 为 目标 ，398-399, 401 
使 用 CSS 来 定位 ，324-326 
使 用 ElementById 来 获取 ，238, 240 
使 用 类 标识 一 组 元 素 ，243 
用 于 标识 一 组 元 素 的 类 ，243 
元 素 对 象 
返回 元 素 对 象 列表 ，397 
简介 ，231, 245 
原型 链 
创建 ，591 
继承 ，592 


原型 式 继承 ，569-572 
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在 JavaScript 中 将 字符 串 括 起 ，13 
自动 造句 应 用 程序 (示例 ) ，131-133 
字符 串 














prompt 国 数 返 回 数字 的 字符 串 表 示 ，55 


包含 的 属性 ，296 
空 字符 串 为 假 值 ，292 
排序 运算 符 ，459 


拼接 ，15, 133, 142, 286_287, 312, 354 
神秘 生活 ，294-296 
用 作 条 件 ，23 
与 数字 比较 ，275-277, 281 
字符 串 方 法 和 属性 简明 教程 ，297 
字符 串 数 组 ，132 
作为 基本 类 型 ，266 
作为 基本 类 型 和 对 象 ，294-296 
字面 量 
用 来 创建 对 象 ，522 
与 构造 函数 比较 ，532, 539-542, 559 
字面 量 ， 数 组 中 ，151-152 
自由 变量 ，495-496, 501, 516 
遮 住 变 量 ，104 
侦 听 器，384。 男 请 参见 “事件 处 理 程 序 ” 
真 值 和 假 值 ，291-293, 313 
值 


NaN (不 是 数字 ) ，272-274, 281, 292 


null, 270 

undefned，208 
变量 和 值 ，11 

对 象 ，266 

对 象 的 属性 及 其 值 ，176, 219 
国 数 为 一 等 公 民 


从 函数 返回 函数 ，450-456, 470, 472 


简介 ，442-443 


将 函数 传递 给 其 他 函数 ，443-448, 468, 482, 486, 514 


炎 换 函数 表达 式 ，481 


使 用 数组 的 sort 方 法 ，457-463, 472-473 
严峻 的 JavaScript 挑 战 ，487, 508, 517 


基本 类 型 ，266 

类 型 转换 和 值 ，276-281 
排序 运算 符 ，459 

识别 undefined，267-268, 308 
数组 元 素 的 类 型 ，134 
相等 和 值 ，276 

像 国 数 传递 值 ，92-93, 192 
严格 相等 ，280 
运算 符 和 值 ，286 
真 值 和 假 值 ，291-293 
字符 串 ，291-297 
作为 值 的 函数 ，439-440, 467 


定单 击 事 件 处 理 程序 ，396-397 
质量 保证 (QA) 


货真价实 的 战舰 游戏 中 的 质量 保证 ，370-371 


简介 ，61 
实施 ，61, 69-70 


作为 学 习 者 的 读者 ，xxviii 
作为 一 等 公民 的 函数 


从 函数 返回 函数 ，450-456, 470, 472 
简介 ，442-443 

使 用 数组 的 方法 sort，457-463, 472-473 
替换 函数 表达 式 ，481 


回国 数 传 递 图 数 ，443-448, 468, 482, 486, 514 


严峻 的 JavaScript 挑 战 ，486, 508, 517 
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Head First JavaScript 程 序 设计 
你 能 从 这 本 书 中 学 到 什么 ? 


在 这 本 趣 学 指南 中 ， 你 将 学 习 JavaScript 语 言 的 方方面面 ， 包 括 基本 知识 以 及 
对 象 、 畏 数 、 误 览 器 文档 对 象 模型 等 高 级 主题 。 在 阅读 过 程 中 ， 你 还 将 完成 
填 字 游戏 、 探 查 案情 、 以 想象 不 到 的 方式 与 JavaScript 交 互 。 男 外 ， 你 还 将 编 
写 大 量 的 代码 ， 为 独立 打造 Web 应 用 程序 打下 坚实 的 基础 。 
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[ 2 ] 编写 技能 到 
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详细 了 解 解 决 

实际 问题 的 过 程 ， 

打造 交互 式 助 你 掌握 编写 
WER 应 用 程序 。 代码 的 最 佳 方法 。 





这 本 书 有 什么 特别 之 处 ? 


本 书 基于 神经 生物 学 、 认 知 学 和 学 习 理 论 领 域 的 最 新 研究 成 果 ， 采 用 了 大 量 
油 发 大 脑 的 视 完 元 素 ， 而 不 古 充 斥 着 让 借 界 僻 睡 的 文字 。 
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“这 是 一 本 优秀 的 编程 入 门 教 
程 ， 同 时 涵盖 了 对 和 象 创建 、 
继承 和 闭 包 等 高 阶 主题 ， 帮 
助 读者 在 掌握 现代 计算 机 编 
程 基 本 知识 的 同时 涉猎 一 些 
最 有 趣 的 概念 。” 
一 一 Peter Casey, 
中 俄 勒 风 社区 学 院 教 授 


ENA 
Script 的 幕后 ， 深 入 了 解 这 门 
非凡 编程 语言 的 工作 原理 。” 

一 一 Chris Fuselier., 


工程 咨询 师 


“要 是 我 最 初学 JavaScript 时 有 
这 本 书 就 好 了 ! ” 

一 一 Daniel Konpacki, 

化 特 迪 士 尼 公 司 

资深 软件 工程 师 
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